javascript - kemas kini pembolehubah vue tidak boleh mencetuskan kemas kini dom

Question

Seperti yang ditunjukkan di bawah, saya menggunakan v-for untuk menjadikan itemList ini dalam html, dan mengawal sama ada untuk memaparkan (v-show) html yang sepadan dengan item ini melalui aktif setiap item.
Namun, jika anda memilihItem melalui kaedah acara seperti ini dan menukar itemList, dom tidak dikemas kini? ? ?

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;
        },
        
    },
});

Answer 1

// 你的数据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;
        },
        
    },
});

Answer 2

vue.itemList[index].aktif = benar; vue ditukar kepada ini

Answer 3

Adakah terdapat nilai untuk console.log(index) dalam selectItem Anda harus menggunakan ini untuk mendapatkan objek vue ini

Answer 4

Kaedah ubah suai data tidak betul, jadi tiada ralat dilaporkan?

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;
        }
    },
});

Answer 5

Mengikut format data yang anda berikan, saya mencubanya dan ia berkesan Kodnya adalah seperti berikut
`<p id="app">
<li v-for="(item,index) dalam itemList" v- on:click="selectItem(index)" v-if="item.active">

{{item.text}}

</li>
</p>
<skrip>

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;
        },

    },
});

</skrip>`

Answer 6

Di dalam vue, ia bukan melalui vue Walaupun anda menggunakan pembolehubah untuk menyimpan contoh vue melalui ini

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

Answer 7

Bagaimanakah anda menulisnya dalam html anda? Walaupun kod js anda tidak cukup elegan, sebagai contoh, adalah lebih sesuai untuk menggunakan tatasusunan dan bukannya objek di sini, tetapi saya fikir kegagalan dom anda untuk membuat bukan masalah di sini. Ia harus terikat dengan kawalan bentuk seperti masalah aliran sehala bagi data terpilih.

Answer 8

Mod nilai kunci tidak boleh dipantau oleh vue, vue menyediakan kaedah $set. . Pemadaman juga memerlukan
pilihItem: fungsi (indeks) {

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

},

Answer 9

Tukar Vue kepada ini dan cuba

Answer 10

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