使用 v-model 時未觸發數據對象屬性的 Vue.js 反應性

Question

我有一個包含一個對象的數據組件，這個對象有一個屬性，它是一個數組。

<template>
    <div>
        <product-selector :selected-products="order.selectedProducts" v-model="order.selectedProducts"/>
    </div>
</template>

data () {
    return {
        order: {
            selectedProducts: [],
        },
    };
}

每次在產品選擇器中選擇/取消選擇新產品時，我都會使用新數組發出一個“輸入”事件。 問題是父組件中的訂單對象不是響應式的，也沒有觸發新的渲染事件。 如果我不使用“訂單”對象而是直接使用“selectedProducts”數組，它可以工作，但我不想使用這個解決方案。 稍后我需要將訂單對象傳遞給其他組件。

Answer 1

你可以讓你的對象像： order: {

        selectedProducts: [],
        key:0
    },

和你的模板

<product-selector :selected-products="order.selectedProducts" v-model="order" :key="order.key/>

當您發出新選擇的產品時，增加訂單鍵

Answer 2

如果要使組件具有“反應性”，則必須將數據從子組件向上發送到父組件，然后在父組件中，您必須對發出的事件做出反應。 您可以在此處的文檔中閱讀有關它的更多信息： https ://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

注意這部分：

但是，要使其真正起作用，組件內部必須：

將 value 屬性綁定到 value prop 在輸入時，使用新值發出自己的自定義輸入事件