Vue.js .$set 不是函數

Question

我正在嘗試使用$set函數修改存儲在 vuejs 中的數據。 但是我收到了這個錯誤： TypeError: app.messageBox.$set is not a function.

下面是關於我如何定義 app 和 messageBox 的代碼：

app = new Vue({
    el: '#app',
    data: {
        messageBox: [{
            id: 1,
            message: 'first'
        }, {
            id: 2,
            message: 'second'
        }]
    }
});

在另一個js文件中，我嘗試修改messageBox中的數據：

function test() {
    app.messageBox.$set(0, {message: 'aaa'});
}

Answer 1

正確的語法是Vue.set(target, index, value) 。 在組件代碼或單文件組件中使用時，您可以使用等效別名： this.$set(target, index, value) ：

Vue.set(app.messageBox, 0, { message: 'outside component' });

// or when you don't access to `Vue`:
app.$set(app.messageBox, 0, { message: 'outside component' });

// or when `this` is the Vue instance:
this.$set(this.messageBox, 0, { message: 'inside component' })

 const app = new Vue({ el: '#app', data() { return { messageBox: [{ id: 1, message: 'first' }, { id: 2, message: 'second' }] }; }, mounted() { setTimeout(() => { this.$set(this.messageBox, 0, { message: 'inside component' }) }, 1000) } }); setTimeout(() => { Vue.set(app.messageBox, 0, { message: 'outside component' }); }, 2000);

 <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script> <div id="app"> <p v-for="msgBox of messageBox">{{msgBox.message}}</p> </div>

Answer 2

此示例用於更新數組 car 中的產品數量：

 const indice = this.car.findIndex((pr) => pr.id === product.id);
                    if(indice===-1){
                        product.qty = 1
                        this.car.push(product)
                    }else{
                        //Vue no detectara cambios en el array si se actualiza por indice https://stackoverflow.com/a/59289650/16988223
                        //this.car[indice].qty++
                        const productUpdated = product 
                        productUpdated.qty++
                        this.$set(this.car, indice, productUpdated)
                    }