V型模型未更新数据功能

Question

我正在组装一个子组件，每次单击其中一个增量按钮时，该组件都会将数据传递回其父组件。但是v-model并没有更新数据函数。即使数字输入字段的值正在更改，kf_units_leaking的值也保持不变。

<template>
<div>
<input
@click="
decrementValue($event)
sendChildData(kfData)
"
type="button"
value="-"
class="btn button-minus border icon-shape icon-sm lh-0 bg-dark text-light"
data-field="quantity"
/>
<input
id="kfUnitsLeaking"
type="number"
step="1"
v-model="kfData.kf_units_leaking"
name="quantity"
class="form-control quantity-field border-0 text-center w-25"
/>
<input
@click="
incrementValue($event)
sendChildData(kfData)
"
type="button"
value="+"
class="btn button-plus border icon-shape icon-sm lh-0 bg-dark text-light"
data-field="quantity"
/>
</div>
</template>
<script>
export default {
name: 'audittedKitchenFaucets',
props: {
sendChildData: {
type: Function,
},
incrementValue: {
type: Function,
},
decrementValue: {
type: Function,
},
},
data() {
return {
kfData: {
kf_units_leaking: 0,
},
}
},
}
</script>

Answer 1

这是vue.js中反应性的问题。您需要使用$set来更新基于键的对象和基于其索引的数组。你可以在这里找到更多信息：https://v2.vuejs.org/v2/api/#vm-设置

编辑

反应性中的这个问题在Vue版本3中得到了修复，您可以像下面的工作示例一样直接将对象密钥传递给v-model：https://playcode.io/943725/

以下是带有$Set的vue版本2的工作示例：https://github.com/mkhani7980/vue-set-example