[Vuejs]-How to reformat my input field in my custom input component?

1👍

Use padStart for your $emit instead change.

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

Or better use computed property.

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

Now in your native input you can use v-model

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

And you can use v-model in your custom component(wrapper for input)

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

Leave a comment