javascript - 在数据属性对象上使用 get 和 set - VueJS

Question

据我所知，VueJS 有一种方法可以根据此 documentation on Computed property 使用 getter 和 setter 来计算属性.

我这里有 vue 组件，您可以在其中看到金额是一个对象，并且我们有一组来自 vuex 商店的人员。

data() {
  return {
    form: {
      amounts: {},
    },
  };
},
mounted() {
  const persons = this.$store.getters.getPersons()
  persons.forEach((person) => {
    this.$set(this.form.amounts, person.id, '0.00');
  });
},

我这样做是为了可以通过使用 ID 和付款链接将一个人与他在表单上支付的金额关联起来。这是 this.form.amounts 的示例。

{'HKYDUPOK': 0.00},
{'RYYJPUKA': 0.00},
{'KZMUYTAK': 0.00}

现在默认情况下，它们的值应该是 0.00，在输入金额的输入数字字段上，默认情况下我将它们应用到 v-model ，如下所示:

<div v-for="person in persons">
  <input
    class="form-control"
    v-model="form.amounts[person.id]"
    type="number"
    step=".01"
    min="0"
    required>
  </input>
</div>

但事情是这样的，当您在浏览器上打开代码片段时，您会注意到输入数字字段的默认值是 0.00，它在某种程度上充当了占位符。我想删除数字输入上的默认值 0.00 并将其改为空输入，但每人金额的基础值不是 null 但仍然是 0.00 或 0。这是这样的当用户尝试在输入框中输入值时，表单将清除输入，而不必删除并用实际值替换 0.00(希望这很清楚)。现在有可能在总金额上，至少有 1 人或更多人的金额为 0。我想确保空的输入数字字段不会导致 null，而是导致 0。这可能吗？

我尝试检查计算属性 getter 和 setter 以更改默认绑定(bind)，但如何映射 form.amounts 以将金额与其相应的人员相匹配？在 Get 上，如果值不大于 0.00 或 0，则向输入字段返回空值。 Set 是一个更大的问题，因为它只接受一个名为 newValue 的参数，并且很难说传递 personId 将金额映射到相应的人。有没有一种方法可以触及和操作作为对象的数据属性的绑定(bind)，同时还可以更改模型上的默认行为以返回空而不是 0.00？我希望我的问题足够清楚。

Answer 1

我认为这是 your previous question 的后续内容...

在此阶段，您最好创建一个组件来表示您的数据输入元素。

类似这样的东西(使用单文件组件示例)

<!-- number-input.vue -->
<template>
  <input class="form-control" type="number" 
         step=".01" min="0"
         :value="amount"
         @input="updated"
         required />
</template>
<script>
export default {
  name: 'NumberInput',
  props: {
    value: Number
  },
  computed: {
    amount () {
      return this.value || ''
    }
  },
  methods: {
    updated ($event) {
      this.$emit('input', parseFloat($event.target.value) || 0)
    }
  }
}
</script>

然后您可以在父模板中使用它

<div v-for="person in persons" :key="person.id">
  <NumberInput v-model="form.amounts[person.id]" />
</div>

只需记住导入并使用该组件...

<script>
import NumberInput from 'number-input'
export default {
  components: { NumberInput },
  // etc
}
</script>

JSFiddle Demo

另请参阅https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components