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。我想确保一个空的输入数字字段不会导致空值，而是0。？

我尝试检查计算的属性getter和setter来更改默认绑定，但是如何映射form.amounts以将金额匹配到其对应的人？在Get上，如果该值不大于0.00或0，则将一个空值返回到输入字段。 Set是一个更大的问题，因为它仅接受一个称为newValue的参数，很难说通过personId将金额映射到相应的人。有没有办法触及和操纵作为对象的数据属性的绑定，还可以更改模型的默认行为以返回空而不是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://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

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

1 个答案: