Vue.js 在Vuetify项目中使用一系列方法更新表单输入中的v模型数据？

我试图更新一系列

v-text-fields

（

type='number'

）以便用户输入数值后，输入中显示的数字将用逗号更新（例如，5032的值将变为5032）。我发现并能够使用提供的示例通过单个输入完成我想要的

标记：

<div id="app">
  <div v-if="visible === true">
    Enter Amount: <br>
    <input type="number" 
    v-model="amount" 
    placeholder="Enter Amount" 
    @blur="onBlurNumber"/>
</div>

<div v-if="visible === false">
  Enter Amount: <br>
  <input type="text" 
  v-model="amount" 
  placeholder="Enter Amount" 
  @focus="onFocusText"/>
</div>

…但是我想让这些方法足够通用，可以处理我正在使用的任何数值

v-text-fields

。我已经能够在我的方法中更新参数值，但无法实际更新

v-text-field

的

v-model

数据

标记：

<div id="app">
 <div v-if="visible === true">
    <v-text-field 
      class="mb-3 d-inline-block"
      type="number" 
      prepend-inner-icon="attach_money" 
      v-model="amount" 
      label="Amount"
      mask="##########" 
      outline
      :rules="[v => !!v || 'Amount is required']" 
      @blur="onBlurNumber(amount)"
      required>
    </v-text-field>
  </div>

  <div v-if="visible === false">
    <v-text-field 
      class="mb-3 d-inline-block"
      prepend-inner-icon="attach_money" 
      v-model="amount" 
      label="Amount"
      outline
      @focus="onFocusText(amount)"
      >
     </v-text-field>
   </div>

我可以记录这些方法中的数据值，并确认逗号的应用是否正确，但现在我不知道如何将数据值发送回以更新

v-text-field

的v-model。我尝试使用

ref

值选择

v-text-field

，但是触发该方法时，

ref

会显示为

未定义的值

有人知道我如何以这种方式使用参数更新
v-text-field
的
v-model
，从而使方法可重用吗？
我假设每个文本字段都有多个
数据
项：

data:function（）{
返回{
//字段1
temp1:null，
amount1:null，
可见1：是的，
//字段2
temp2:null，
amount2:null，
可见2：正确
}
}

在标记中，当调用方法时，可以传递属性的名称，或者它的后缀

我假设每个文本字段都有多个
数据
项：

data:function（）{
返回{
//字段1
temp1:null，
amount1:null，
可见1：是的，
//字段2
temp2:null，
amount2:null，
可见2：正确
}
}

在标记中，当调用方法时，可以传递属性的名称，或者它的后缀


<div id="app">
 <div v-if="visible === true">
    <v-text-field 
      class="mb-3 d-inline-block"
      type="number" 
      prepend-inner-icon="attach_money" 
      v-model="amount" 
      label="Amount"
      mask="##########" 
      outline
      :rules="[v => !!v || 'Amount is required']" 
      @blur="onBlurNumber(amount)"
      required>
    </v-text-field>
  </div>

  <div v-if="visible === false">
    <v-text-field 
      class="mb-3 d-inline-block"
      prepend-inner-icon="attach_money" 
      v-model="amount" 
      label="Amount"
      outline
      @focus="onFocusText(amount)"
      >
     </v-text-field>
   </div>

onBlurNumber(data) {
    this.visible = false;     
    this.temp = data;
    data = this.thousandSeprator(data);
},
onFocusText(data) {
    this.visible = true;
    data = this.temp;
},