Vue.js 2 Web Development Projects

Customizing v-model

By default, v-model uses the value prop and the input event as we just saw, but we can customize that:

1. Inside the FormInput component, add the model option:

      model: {       prop: 'text',       event: 'update',      },

2. We then need to change the name of our value prop to text:

      props: {        // ...        text: {          required: true,        },      },

3. And in the template:

      <input       ...       :value="text"       ... />

4. Plus the input event should be renamed to update:

      this.$emit('update', event.currentTarget.value)

The component should still work in the Login component, since we told v-model to use the text prop and update event!

Our input component is now ready! For this project, we have kept this component simple, but you can add more features into it if you want to, such ...