公司项目中遇到一个问题,联动下拉框,并且数据是使用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:,b:},{a:,b:},{a:,b:}] },
{ text: 'Two', value: [{a:,b:},{a:,b:},{a:,b:}] },
{ text: 'Three', value: [{a:,b:},{a:,b:},{a:,b:}] }
];
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"
的属性,问题便解决了