iview2 Selelt的二级联动

<template>
  <div class="m-article">
    <Form ref="formValidate" :model="formValidate"
          :rules="ruleValidate" :label-width="100"
          label-position="left">
      <FormItem label="文章栏目" prop="categoryId">
        <Select v-model="formValidate.categoryId"  @on-change="changeSecList"
                style="width:200px">
          <Option v-for="item in categoryList"
                  :value="item.id" :key="item.id">
            {{ item.name }}</Option>
        </Select>
        <Select v-model="formValidate.secondname"
                style="width:200px">
          <Option v-for="item in secondnameList"
                  :value="item.secondname" :key="item.secondname">
            {{ item.secondname }}</Option>
        </Select>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        secondnameList: [],
        categoryList: [
          {
            "id":"5d638b9bcf1f7a000141b839",
            "name":"债券","secondnames":[
              {
                "secondname":"债券二级菜单1"
              },
              {
                "secondname":"债券二级菜单2"
              }
            ]
          },
          {
            "id":"5da1615f7deab70001eeea1c",
            "name":"股票","secondnames":[
              {
                "secondname":"股票二级菜单1"
              }
            ]
          }],
        formValidate: {
          categoryId: ‘‘,
          secondname: ‘‘,
        },
        ruleValidate: ruleValidate,
      };
    },
    methods: {
      changeSecList(val) {
        this.secondnameList = []
        for (var i=0;i< this.categoryList.length; i++) {
          if (val === this.categoryList[i].id) {
            this.secondnameList = this.categoryList[i].secondnames
          }
        }
      }
    },
  };
</script>