javascript - vue variable update cannot trigger dom update
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-12 09:29:44
0
10
1092

As shown below, I use v-for to render this itemList in html, and control whether to display (v-show) the html corresponding to this item through the active of each item.
However, if the itemList is changed through the event method selectItem like this, the dom is not updated? ? ?

var vue = new Vue({
    el: '#app',
    data: {
        itemList:{
            '1':{'text':'abc', 'active':false},
            '2':{'text':'abc', 'active':true}
         },
    },
    methods: {
        selectItem: function (index) {
            vue.itemList[index].active = true;
        },
        
    },
});
女神的闺蜜爱上我
女神的闺蜜爱上我

reply all(10)
仅有的幸福
// 你的数据itemList结构改改
var vue = new Vue({
    el: '#app',
    data: {
        itemList:[
            {'text':'abc', 'active':false},
            {'text':'abc', 'active':true}
         ],
    },
    methods: {
        selectItem: function (index) {
            this.itemList[index].active = true;
        },
        
    },
});
phpcn_u1582

vue.itemList[index].active = true; vue changed to this

滿天的星座

Is there a value for console.log(index) in selectItem? You should use this to get this vue object

曾经蜡笔没有小新

The method of modifying data is incorrect, so no error is reported?

var vue = new Vue({
    el: '#app',
    data: {
        itemList:[
            {'text':'abc', 'active':false},
            {'text':'abc', 'active':true}
         ]
    },
    methods: {
        selectItem: function (index) {
            this.itemList[index].active = true;
        }
    },
});
某草草

According to the data format you provided, I tried it and it works. The code is as follows
`<p id="app">
<li v-for="(item,index) in itemList" v- on:click="selectItem(index)" v-if="item.active">

{{item.text}}

</li>
</p>
<script>

var vue = new Vue({
    el: '#app',
    data: {
        itemList:{
            '1':{'text':'abc1', 'active':true},
            '2':{'text':'abc2', 'active':true}
        },
    },
    methods: {
        selectItem: function (index) {
            console.log(vue.itemList[index].active);
            vue.itemList[index].active = false;
        },

    },
});

</script>`

扔个三星炸死你

Inside vue, it is not through vue. Even if you use a variable to save the instance of vue through this

vue.itemList[index].active = true;  
换成
this.itemList[index].active = true;
阿神

How do you write it in your html? Although your js code is not elegant enough, for example, it is more appropriate to use arrays instead of objects here, but it is also correct. I think the failure of your dom to render is not the problem here. It should be bound to the form control. Such as the problem of one-way flow of select data.

巴扎黑

The key value mode cannot be monitored by vue, vue provides the $set method. . Deletion also requires
selectItem: function (index) {

var newA  = this.itemList[index];
newA.active = true
this.$set(this.itemList,index,newA)

},

習慣沉默

Change Vue to this and try it

typecho

this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template