Как переформатировать мое поле ввода в моем пользовательском компоненте ввода?

Я сделал компонент для полей формы ввода моего приложения. В этом:

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

Работает хорошо, за исключением того, что теперь я хочу автоматически добавлять начальный ноль для чисел от 1 до 9:

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

Но я получаю эту ошибку:

Избегайте изменения свойства напрямую, так как значение будет перезаписано всякий раз, когда родительский компонент повторно отображает. Вместо этого используйте данные или вычисляемое свойство на основе значения реквизита. Проп мутируется: "значение"

Что я понимаю, но как тогда добиться того, что я хочу в своем компоненте? Я не понимаю, как применить этот совет и использовать вычисляемое свойство, что мне делать с этим вычисляемым свойством?


vue.js computed-properties
person drake035    schedule 04.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте 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"
>
person Andrey Kadnikov    schedule 05.01.2020