javascript - vue變數更新無法觸發dom更新

Question

如下圖所示，我在html用v-for渲染這個itemList，透過每個item的active控制是否顯示(v-show)這個item對應的html。但是，像這樣透過事件方法selectItem，改變了itemList，dom卻不更新？ ？ ？ {代碼...}

仅有的幸福 · Answer

phpcn_u1582 · Answer

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

滿天的星座 · Answer

selectItem裡console.log(index)有值嗎，應該是用this來取得這個vue物件

曾经蜡笔没有小新 · Answer

修改資料方法都不對，不報錯嗎?

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

依照你提供的資料格式，我試了一下，是可以的，程式碼如下
`

{{item.text}}

`

扔个三星炸死你 · Answer

在vue內部不是透過vue來點即使你用了一個變數來保存 vue的實例透過 this

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

阿神 · Answer

你html裡面怎麼寫的，雖然你這js程式碼寫的不夠優雅，例如這裡使用陣列比物件更合適，但是也沒錯，我覺得你dom沒有渲染不是這裡的問題，應該是綁定表單控制，如select 資料單向流的問題。

巴扎黑 · Answer

鍵值的模式不能被vue監聽到，vue提供了$set的方法。。刪除也需要
selectItem: function (index) {

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

},

習慣沉默 · Answer

把Vue改為this試用

typecho · Answer

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