cari

Rumah  >  Soal Jawab  >  teks badan

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

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

membalas semua(10)saya akan balas

  • 仅有的幸福

    仅有的幸福2017-06-12 09:31:44

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

    balas
    0
  • phpcn_u1582

    phpcn_u15822017-06-12 09:31:44

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

    balas
    0
  • 滿天的星座

    滿天的星座2017-06-12 09:31:44

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

    balas
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-06-12 09:31:44

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

    balas
    0
  • 某草草

    某草草2017-06-12 09:31:44

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

    balas
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-12 09:31:44

    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;

    balas
    0
  • 阿神

    阿神2017-06-12 09:31:44

    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.

    balas
    0
  • 巴扎黑

    巴扎黑2017-06-12 09:31:44

    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)

    },

    balas
    0
  • 習慣沉默

    習慣沉默2017-06-12 09:31:44

    Tukar Vue kepada ini dan cuba

    balas
    0
  • typecho

    typecho2017-06-12 09:31:44

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

    balas
    0
  • Batalbalas