vue动态添加data依赖的试验

cdoe

<div v-if="show">
    <ul v-for="p in list"
       @click="clickP(p, $index)"
       :class="{'active': p.click }">
        {{ p.value }}
        <li v-for="a in p.nimei"
            @click.stop="clickA(a, $index, $parent.$index)"
            :class="{'active': a.click }">{{a.a}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data : {
            show:true,
            list:[
                {value:1, nimei:[{a:111},{a:222}]},
                {value:2, nimei:[{a:111},{a:222}]},
                {value:3, nimei:[{a:111},{a:222}]},
                {value:4, nimei:[{a:111},{a:222}]}
            ]
        },
        methods:{
            clickP:function(p, index){
                p.click = true;
                var newP = Object.assign({}, p);
                this.list.$set(index, newP);
            },
            clickA:function(a, index, parentIndex){
                a.click = true;
                var newA = Object.assign({}, a);
                this.list[parentIndex].nimei.$set(index, newA);
            }
        }
    });
</script>