就想问问是不是vue的bug 联动 下三级

Question

代码在下面

实现联动 选瓜子扣 对应 瓜子扣下面parts中属性
http://codepen.io/shenyuanyua...

Answer 1

是因为刚开始的时候 a 是没有值的， 所以你在第二个 select 中 使用 partsConf[a] 返回的是 undefined。 可以看到控制台抛出的异常

Cannot read property 'parts' of undefined

使用计算属性就可以解决这个问题，可以参考我改过的codepen代码
codepen-fixed

<div id="app">
   <select v-model="a">
<option v-for="item in partsConf" :label="item.categoty_name" :value="item.category_id"></option>
    </select>  
  <select v-model="b">
<option v-for="item in currentParts" :label="item.part_name" :value="item.part_id"></option>
    </select>  
  
</div>
  <script src="http://cdn.bootcss.com/vue/2.1.6/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      computed: {
       currentParts () {
         var currentConf = this.partsConf[this.a]
         return currentConf && currentConf.parts
       } 
      },
      data: {
        a:'',
        b:'',
        partsConf: {
            "1": {
                "category_id": "1",
                "categoty_name": "瓜子扣",
                "parts": [
                    {
                        "part_id": "1",
                        "part_name": "2016经典款式瓜子扣"
                    },
                    {
                        "part_id": "2",
                        "part_name": "2016简约款式瓜子扣"
                    },
                    {
                        "part_id": "3",
                        "part_name": "2015简约款式瓜子扣"
                    },
                    {
                        "part_id": "4",
                        "part_name": "2015简约款式瓜子扣1"
                    }
                ]
            },
            "2": {
                "category_id": "2",
                "categoty_name": "瓜子扣1",
                "parts": [
                    {
                        "part_id": "5",
                        "part_name": "2015简约款式瓜子扣1"
                    }
                ]
            }
        }
      },
    })
  </script>