vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

公司项目中遇到一个问题，联动下拉框，并且数据是使用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"的属性，问题便解决了

posted @ 2017-02-16 09:49  Jason齐齐  阅读(14933)  评论(0)  编辑  收藏  举报