How to use v-model and v-model.trim at the same time in vue

Question

Firs of all here is my code:

<input type="text" id="first_name" class="form-control" v-model="user.attributes.first_name"
                       @keyup.enter="updateProfile" v-model.trim="$v.first_name.$model"
                       :class="{'is-invalid':$v.first_name.$error, 'is-valid':!$v.first_name.$invalid}">

I am using vuelidate in my form to validate my input field. But at the same time, I am getting the user object as a prop and I want to show the first name of the object as a value of the input field. Since I trim the value of the input field, I think I am not able to use v-model to show my value anymore. Do you have any solution for this?

Answer 1

First, you can't have multiple v-model on the same element.

Then, if you want to use a prop as a v-model, you have to set the @input event yourself.

cf vuelidate documentation

<template>
 <input v-model.trim="$v.first_name.$model" @input="updateFirstname">
</template>

<script>
export default {
  props: {
     user: Object
  },
  validations: {
     first_name: { ... }
  },
  methods: {
    updateFirstName(newFirstName) {
      this.user.attributes.first_name = newFirstName
      this.$v.first_name.$touch()
    }
  }
}
</script>