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

Question

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

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

雷雷

Answer 2

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

Answer 3

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

Answer 4

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

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

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

{{item.text}}

`

Answer 6

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

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

Answer 7

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

Answer 8

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

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

},

Answer 9

把Vue改為this試用

Answer 10

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