Vue.js使用v-model时数据对象属性响应式未触发问题求助

你遇到的问题通常来自两类原因：一是组件v-model和props的映射不匹配，二是Vue2的嵌套属性响应式检测限制。

问题1：v-model绑定不匹配 #

Vue2的组件v-model默认会绑定名为value的prop，监听input事件。你当前代码中同时给子组件传了selected-products属性又用了v-model，如果子组件没有配置自定义model，v-model实际绑定的是不存在的value属性，自然不会触发更新。
两种修复方案二选一：

• 方案1：子组件配置自定义model
  在product-selector组件的选项中新增model配置，指定绑定的prop和触发事件：

// product-selector组件代码
export default {
  // 新增这段配置
  model: {
    prop: 'selectedProducts',
    event: 'input'
  },
  props: {
    selectedProducts: {
      type: Array,
      default: () => []
    }
  },
  // 其余组件逻辑
}

父组件直接用v-model即可，不需要重复传selected-products：

<product-selector v-model="order.selectedProducts"/>

• 方案2：手动绑定属性和事件，不使用v-model语法糖

<product-selector 
  :selected-products="order.selectedProducts" 
  @input="newVal => order.selectedProducts = newVal"
/>

问题2：嵌套属性响应式未触发 #

如果你已经确认v-model配置正确，子组件emit的是全新数组，还是没有触发更新，属于Vue2的响应式检测限制：对于嵌套对象的属性赋值，偶尔会出现无法触发依赖收集的情况。
两种修复方案二选一：

• 方案1：使用$set赋值，显式触发响应式更新
  把赋值逻辑改成用Vue提供的$set方法：

<product-selector 
  :selected-products="order.selectedProducts" 
  @input="newVal => $set(order, 'selectedProducts', newVal)"
/>

• 方案2：赋值后强制组件重渲染
  如果不想修改赋值逻辑，可以在赋值后调用$forceUpdate强制组件重渲染：

// 父组件监听input事件的回调
handleProductChange(newVal) {
  this.order.selectedProducts = newVal
  this.$forceUpdate()
}

额外排查点 #

确认子组件emit的是全新数组引用：如果你在子组件中是对原数组做push、splice等修改后直接emit原数组，也可能出现响应式未触发的情况，修改数组时生成新数组引用即可：

// 选中商品时的写法示例
const newSelected = [...this.selectedProducts, newProduct]
this.$emit('input', newSelected)

// 取消选中的写法示例
const newSelected = this.selectedProducts.filter(item => item.id !== targetId)
this.$emit('input', newSelected)

内容的提问来源于stack exchange，提问作者Vasile Alexandru Peşte