Vue add suffix to model

I try add suffix (date.now) to my model each time when user enter some information in v-model=Name to achieve it i try to make it by function loanDate which trigger each time when i enter name.

But the problem is is that do not work correctly and i wonder what is the right way to achieve it:

Input field:

  <v-text-field
         v-model="Name"
         label="Please enter the Loan Number"
         required
         :rules="nameRules"
          outlined
          @input="loanDate"
    />

loanDate function

 loanDate() {
      let d = new Date();
      let curr_date = d.getDate();
      let curr_month = d.getMonth() + 1; //Months are zero based
      let curr_year = d.getFullYear();
      let date_ = `${curr_month}${curr_date}${curr_year}`
      this.Name  = this.Name + '.' +  date_
      return this.Name

    },

expected result:

input => Name => (v-model = Name.03/05/2021)

How can i achieve this?

Answer

The problem is the input event fires on all changes in the text field, so every character gets a date appended to it.

One solution is to switch from the input event to the change event, which fires for changes only after the input loses focus:

<v-text-field @change="loanDate" />

demo

Advertisement

Answer