使用 v-model 时未触发数据对象属性的 Vue.js 反应性答案

【问题标题】：Vue.js reactivity of data object property not triggered when using v-model使用 v-model 时未触发数据对象属性的 Vue.js 反应性
【发布时间】：2021-11-09 18:52:03
【问题描述】：

我有一个组件，其数据包含一个对象，这个对象有一个属性，它是一个数组。

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

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

每次在产品选择器中选择/取消选择新产品时，我都会使用新数组发出一个“输入”事件。问题是父组件中的订单对象不是响应式的，也没有触发新的渲染事件。如果我不使用“订单”对象而是直接使用“selectedProducts”数组，它可以工作，但我不想使用这个解决方案。稍后我需要将订单对象传递给其他组件。

【问题讨论】：

你能显示发出事件的代码吗？
事件被正确发出，如果我直接在 v-model 中使用数组而不是对象属性，它就可以工作。问题是对象没有反应。
Vue 有一些反应性限制，这取决于您如何更改 selectedProducts 数组。
我知道限制，这就是为什么我说“新数组”是为了让你知道它是一个新的参考；）

标签： javascript vue.js vue-reactivity

【解决方案1】：

你可以让你的对象像：顺序：{

        selectedProducts: [],
        key:0
    },

和你的模板

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

当您发出新选择的产品时，增加订单键

【讨论】：

【解决方案2】：

如果你想让组件“反应”，你必须从子组件向上发射数据到父组件，然后在父组件中，你必须对发射的事件做出反应。您可以在此处的文档中阅读有关它的更多信息： https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

注意这部分：

要让它真正起作用，组件内部必须：

将 value 属性绑定到 value prop 输入时，发出自己的自定义输入新值的事件

【讨论】：