Vue为模型添加后缀答案

【问题标题】：Vue add suffix to modelVue为模型添加后缀
【发布时间】：2021-07-26 04:45:05
【问题描述】：

每次当用户在v-model=Name 中输入一些信息时，我都会尝试在我的模型中添加后缀（date.now）来实现它，我尝试通过函数loanDate 来实现它，该函数每次输入名称时都会触发。

但问题是不能正常工作，我想知道实现它的正确方法是什么：

输入字段：

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

loanDate 函数

 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

    },

预期结果：

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

我怎样才能做到这一点？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

问题是 input 事件会在文本字段中的所有更改时触发，因此每个字符都会附加一个日期。

一种解决方案是从input 事件切换到change event，只有在输入失去焦点后才会触发更改：

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

demo

【讨论】：