时间戳

首页 > 解决方案 > 如何重置 v-money 表单字段

vue.js - 如何重置 v-money 表单字段

问题描述

在我的 vuetify v-form 中，我有插入货币值的字段，我使用 v-money 来掩盖插入的值，但是当我尝试使用“.reset()”或通过在我的功能结束时，值不会重置。

我还有什么其他方法可以重置这些字段？

代码如下

<v-col cols="6">
    <v-text-field
        v-model="value1" 
        v-money="money"
        refs='value1'
        :rules="baseRules"
        label="gross value"
    ></v-text-field>
</v-col>
<v-col cols="6" v-if='reset'>
    <v-text-field
        v-model="value2" 
        v-money="money"
        :rules="baseRules"
        label="net value"
    ></v-text-field>
</v-col>

data: () => ({
    valid: true,
    value1: '',
    value2: '',
    money: {
        decimal: ',',
        thousands: '.',
        prefix: '$ ',
        precision: 2,
        masked: false
    },
}),
methods: {
    reset () {
      this.$refs.myFormRef.reset()
      this.value1 = ''
      this.value2 = 0
    },

我也尝试了以下代码，但没有奏效。 https://codepen.io/mukatk/pen/NYZvPW

标签： vue.jsvuetify.js

解决方案

我担心 v-money 指令与 Vuetify 的输入不兼容。

它比重置问题更糟糕。如果您检查您的值，您会发现它实际上是被屏蔽的字符串（如“$ 123.456,01”）而不是数字（123456.01）。

推荐阅读