使用 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 在输入时，使用新值发出自己的自定义输入事件