Vuetify v-text-field使用v-mask时后端初始赋值不生效问题

解决方案 #

这个问题的根本原因是v-mask指令默认仅监听用户输入事件，不会在组件初始化、v-model首次赋值时自动执行格式化逻辑，结合你的业务场景有3种可行的修复方式： #

方案1：预处理初始值（最稳定，推荐）

直接用你定义的mask函数提前处理后端返回的原始值，再赋值给v-model绑定变量即可。注意后端返回值优先传纯数字，避免自带的分隔符和格式化规则冲突：

<v-text-field
  v-model="value" 
  v-mask="mask"
/>  

<script>
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
   
export default {
  data: () => ({
    mask: createNumberMask({
      prefix: '',
      includeThousandsSeparator: true,
      thousandsSeparatorSymbol: '.',
      integerLimit: 8,
    }),
    value: ''
  }),
  created(){
    // 假设后端返回的原始值是纯数字1345678
    const rawValue = 1345678
    // 用mask函数预处理后再赋值
    this.value = this.mask(rawValue.toString()).join('')
  }
}
</script>

注意：如果后端返回的数值自带分隔符，需要先过滤掉非数字字符再传给mask函数，避免格式化异常：

const rawValue = "1.345.678".replace(/\D/g, '')
this.value = this.mask(rawValue).join('')

方案2：挂载后手动触发格式化

如果不方便修改初始值的处理逻辑，可以在组件挂载后强制触发输入事件，让v-mask感知到值变化并执行格式化：

<v-text-field
  v-model="value" 
  v-mask="mask"
  ref="inputField"
/>  

<script>
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
   
export default {
  data: () => ({
    mask: createNumberMask({
      prefix: '',
      includeThousandsSeparator: true,
      thousandsSeparatorSymbol: '.',
      integerLimit: 8,
    }),
    value: ''
  }),
  async created(){
    this.value = "1345678"
    // 等待DOM更新完成后触发input事件
    await this.$nextTick()
    this.$refs.inputField.$el.querySelector('input').dispatchEvent(new Event('input'))
  }
}
</script>

方案3：绑定到原生input元素

如果前两种方案都不生效，可以把v-mask指令直接绑定到v-text-field内部的原生输入框上，避免组件封装导致的指令监听失效：

<v-text-field
  v-model="value"
>
  <template v-slot:input="{ inputAttrs, inputEvents }">
    <input
      v-bind="inputAttrs"
      v-on="inputEvents"
      v-mask="mask"
    >
  </template>
</v-text-field>

内容的提问来源于stack exchange，提问作者Alan