javascript - kemas kini pembolehubah vue tidak boleh mencetuskan kemas kini dom
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-12 09:29:44
0
10
1024

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;
        },
        
    },
});
女神的闺蜜爱上我
女神的闺蜜爱上我

membalas semua(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].aktif = benar; vue ditukar kepada ini

滿天的星座

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

曾经蜡笔没有小新

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

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>`

扔个三星炸死你

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;
阿神

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.

巴扎黑

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)

},

習慣沉默

Tukar Vue kepada ini dan cuba

typecho

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!