vue.js v-mask无法正确处理veutifyjs输入

iih3973s  于 2023-10-23  发布在  Vue.js
关注(0)|答案(3)|浏览(113)

我使用veutifyjs文本输入来显示电话号码。我有一个按钮来分配电话号码的v型。但是赋值后没有改变输入的文字.如果我输入一些关于文本输入v-mask工作的想法。但是如果我给v模型赋值,它就不起作用了。另外,我绑下一个把戏,但它没有任何区别。

<v-text-field
          v-model="form.phone_number"
          v-mask="'(###) ###-####'"
          dense
          outlined
          autocomplete="new-password"
          hide-details="auto"
          label="Phone Number"
          placeholder="Phone Number"
        ></v-text-field>

   <v-btn color="warning" @click="dataupdate()">Add</v-btn>
dataupdate() {
      this.$nextTick(() => {
        this.form.phone_number = '4032223344'
      })
    },
am46iovg

am46iovg1#

你必须在设置form.phone_number的值之后动态地设置v-mask,所以我们可以创建一个phoneNumberMask变量:

data() {
  return {
    phoneNumberMask: '',
  };
}

将其设置为v-mask值:

<v-text-field
          v-model="form.phone_number"
          v-mask="phoneNumberMask"
...

然后在dataupdate()处:

dataupdate() {
      this.form.phone_number = '4032223344'
      this.$nextTick(() => {
        this.phoneNumberMask = '(###) ###-####'
      })
      /*
       * you'd just have to deal with calling this function
       * when phoneNumberMask already has a value
       * and that depends on your business rules
       */
    },
xam8gpfp

xam8gpfp2#

我在迁移到Vuetify 2后遇到了同样的问题,并修复了它:只是将v-mask库替换为vue-input-facade,如提到的here
它的工作原理与第一个Vuetify中的旧mask完全相同,但您应该使用参数“v-facade“。

6l7fqoea

6l7fqoea3#

我的情况下,我用这个电磁阀和解决我的问题
方法:

<input
  class="form-control"
  @input="inputValue"
  @paste="pasteValue"
  v-mask="phoneNumberMask"
  v-model="tel"
  :required="required"
  aria-label
  aria-describedby="basic-addon1"
  :disabled="disabled"
/>
pasteValue(e) {
  clearTimeout(this.timeout);
  this.tel = '';
  this.timeout = setTimeout(() => {
    this.tel = e.target.value;
  }, 100);
}

相关问题