V-Model 不更新数据 Function

Question

我正在组合一个子组件，每次单击其中一个增量按钮时，它都会将数据传回其父组件。 但是 v-model 没有更新数据 function。 即使数字输入字段的值正在改变，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://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue

Answer 2

首先，这段代码不起作用，会导致语法错误。

  @click="
    decrementValue($event)
    sendChildData(kfData)
  "

您需要用分号分隔函数;

   @click="
    decrementValue($event);
    sendChildData(kfData)
  "