vue 實現二級聯動

因項目須要，最近用vue寫了個二級聯動，剛開始用vue不熟悉，收集了兩種方法，這也是我借鑑別人的文章和思路才寫出來的，其實沒什麼區別，能夠參考下：
第一種：
這是第一種方法的html部分代碼：

<div id="test">
  <select v-model="selected">
    <option v-for="yx in YX" :value="yx.text">
        {{yx.text}}
    </option>
  </select>
  <select>
    <option v-for="zy in selection" :value="zy.text" :selected="$index == 0 ? true : false">
        {{zy.text}}
    </option>
  </select>
</div>

這是第一種方法的js部分代碼：

new Vue({
  el: '#test',
  data: {
    selected: '計信院',
    YX: [{
      text: '計信院',
      ZY: [{
        text: '軟件工程'
      }, {
        text: '計算機科學與技術'
      }, {
        text: "信息安全"
      }, ]
    }, {
      text: '商學院',
      ZY: [{
        text: '旅遊管理'
      }, {
        text: '工商管理'
      }, {
        text: "行政管理"
      }, ]
    }, ]
  },
  computed: {
    selection: {
      get: function() {
        var that = this;
        return this.YX.filter(function(item) {
          return item.text == that.selected;
        })[0].ZY;
      }
    }
  }
});

以上是一種方法，整體來講還不錯，並且默認有第一項，無需在寫默認項。
下面是另外一種方法，這個方法和上面不一樣的是沒有默認項，可是比上面哪一種方法更好理解，這個方法怎麼加默認項，如今還沒搞明白，後續會繼續更新：
這是第二種方法的html部分代碼：

<div id="test">
    <select v-model="A">
        <option v-for="yx in YX">
            {{yx.text}}
        </option>
    </select>

    <select>
        <option v-for="zy in selection">
            {{zy.text}}
        </option>
    </select>
</div>

這是第二種方法的js部分代碼：

var vm = new Vue({
    el:'#test',
    data:{
        YX:[
            {
                text:'計信院',
                ZY:[
                    {text:'軟件工程'},
                    {text:'計算機科學與技術'},
                    {text:"信息安全"},
                ]
            },
            { 
                text:'商學院',
                ZY:[
                    {text:'旅遊管理'},
                    {text:'工商管理'},
                    {text:"行政管理"},
                ]
            },       
        ]
    },
    computed:{
        selection: function() {
            for (var i = 0; i < this.YX.length; i++) {
                if (this.YX[i].text === this.A) {
                    return this.YX[i].ZY;
                }
            }
        }
    }
});

整體來講，兩種方法均可以，都值得借鑑一下