时间戳

首页 > 解决方案 > 在 Vuetify 项目中使用一系列方法更新表单输入中的 v-model 数据？

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

问题描述

我正在尝试更新一系列v-text-fields( type='number')，以便在用户输入数值后，输入中显示的数字将用逗号更新（例如，5032 的值将变为 5,032）。我找到了这篇文章，并且能够使用提供的示例通过单个输入完成我所追求的......

标记：

<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>

脚本：

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

   thousandSeprator(amount) {
       if (amount !== '' || amount !== undefined || amount !== 0  || amount !== '0' || amount !== null) {
    return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       } else {
           return amount;
       }
   }
}

...但我想让这些方法足够通用，以处理v-text-fields我正在使用的任何数字。我已经能够在我的方法中更新参数值，但无法实际更新v-model.v-text-field

标记：

<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;
},

我可以在这些方法中记录数据的值并确认逗号被正确应用，但现在我不知道如何将数据值发回以更新v-text-fieldv-model。我尝试选择v-text-field使用ref值，但在触发方法时ref会显示为值。undefined

有谁知道我如何以这种方式更新v-modelusingv-text-field参数，以便方法可重用？

标签： vue.jsargumentsvuetify.js

解决方案

我假设data每个文本字段都有多个项目：

data: function() {
  return {
    // Field 1
    temp1: null,
    amount1: null,
    visible1: true,

    // Field 2
    temp2: null,
    amount2: null,
    visible2: true
  }
}

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

<v-text-field @blur="onBlurNumber('2')"

在您的脚本中，您可以使用动态属性更新数据项：

methods: {
    onBlurNumber(suffix) {
      this["visible" + suffix] = false;
      this["temp" + suffix] = this["amount" + suffix];
      this["amount" + suffix] = this.thousandSeprator(this["amount" + suffix]);
    },

这是两个独立文本输入的工作示例，它们调用相同的方法来实现这一点。如果需要，我们可以重构它以减少使用数组的数据项的数量。

推荐阅读