公司項目中遇到一個問題，聯動下拉框，並且數據是使用vue-resource從后台獲取的，格式不利於輸出聯動下拉框，聯動下拉框是第一個下拉框輸出一個數組里每一項json的一個text值，從而第二下拉框輸出這個被選中的text的json中的vuale中json的數據並進行下拉選擇。當第一個下拉框重置選項的時候，第二個下拉框下拉菜單會動態的改變。
這里使用計算屬性來解決了這個問題，
下面是代碼
獲取后台數據后，在第一個下拉框中渲染dom，然后通過computed計算屬性計算出list屬性，然后返回給第二個下拉框使用，這樣便創建了聯動的功能
<body id="app"> <select v-model="selected" id="text"> <option v-for="option in options"> {{option.text}} </option> </select> <br /> <br /> <br /> <select v-model="list"> <option v-for="v in list">{{v.a}}-{{v.b}} </option> </select> </body>
new Vue({ el: '#app', data: { selected:"A", options: Array }, ready: function () { let option= [ { text: 'One', value: [{a:1,b:2},{a:2,b:3},{a:3,b:4}] }, { text: 'Two', value: [{a:11,b:22},{a:22,b:33},{a:33,b:44}] }, { text: 'Three', value: [{a:111,b:222},{a:222,b:333},{a:333,b:444}] } ]; this.$set("options",option); console.log(this.options); }, computed: { list: function () { for(var i in this.options){ // console.log(this.options[i].text) if(this.options[i].text == this.selected){ console.log(this.options[i].value) return this.options[i].value } } } } })
注意：使用的為vue1.0
domo測試成功，開始寫項目，發現在項目中出現Duplicate value found in v-for="...": "". Use track-by="$index" 錯誤，查找原因，由於數據是從后台獲得，JSON數組中有多個相同的字符串，於是在v-for后面加上track-by="$index"的屬性，問題便解決了