如何在我的自定义输入组件中重新格式化输入字段？

Question

我为我的应用程序的输入表单字段创建了一个组件。在其中：

<input
    type="number"
    :value="value"
    @input="$emit('input', $event.target.value)"
    @change="change"
/>

效果很好，除了现在我要为1到9之间的数字自动添加前导零：

change () {
  this.value = this.value.padStart(2, '0');
}

但是，我收到此错误：

避免直接更改道具，因为该值将被覆盖 每当父组件重新渲染时。而是使用数据或 根据属性值计算属性。道具被突变： “值”

我了解什么，但是如何在组件中实现我想要的？我看不到如何应用此建议并使用计算所得的属性，该计算所得的属性该怎么办？

Answer 1

将padStart用$emit代替change。

<input
    type="number"
    :value="value"
    @input="$emit('input', $event.target.value.padStart(2, '0
))"
    @change="change"
/>

或者更好地使用计算属性。

computed: {
  innerValue: {
    get() {
      return this.value;
    },
    set(val) {
      this.$emit('input', val.padStart(2, '0'));
    }
  }
}

现在，您可以在本机输入中使用v-model

<input
    type="number"
    v-model="innerValue"
    @change="change"
/>

您可以在自定义组件（用于输入的包装器）中使用v-model

<custon-component
  v-model="yourVariableFromData"
>