下面代码改变isTrun的值不变，而改变a或name都会变，怎么才能让isTrun变？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="src/vue.js"></script>
</head>
<body>
<div id="app">
    <my-child :msg="arr"></my-child>
</div>
<script>
    Vue.component('myChild',{
        template:'{{arr|json}}<div v-for="item in arr" @click="toggleElement(item)">{{item.isTrun}}{{item.name}}</div>',
        props:['msg'],
        watch:{
            'msg':{
                deep: true,
                handler: function(val, oldVal) {
                    console.log(oldVal)
                    if(oldVal.length>0) return;
                    for(var i=0;i<val.length;i++){
                        var list=val[i];
                        list.isTrun=false;
                        this.arr.push(list);
                    }
                }
            }
        },
        methods:{
            toggleElement:function(item){
                item.isTrun=!item.isTrun;
            }
        },
        data:function(){
            return {
                arr:[]
            }
        }
    });
    new Vue({
        el:'#app',
        data:{
            arr:[]
        },
        ready:function(){
            var self=this;
            setTimeout(function(){
               self.arr=[{a:1,name:'第一条'},{a:2,name:'第二条数据'}];
           },1000)
        }

    })
</script>
</body>
</html>

變化檢測問題

所以有兩種方式：

一開始就全部給定一個 isTrun 的初始值，例如 isTrun: false 跟 a, name 一樣，
利用 $set('isTrun', false) 來增加一個可以被檢測變化的對象屬性

除非真的有必要，不然還是強烈推薦方法(1)

小聲問下：isTrun 是指 isTurn 嗎？

【热门文章】