vuejs在输入时为数字添加逗号

Question

我想在输入时在我的数字中添加分隔符，但它不起作用。

代码

<el-input-number v-model="form.qty" style="width: 100%;" id="test" placeholder="Quantity" controls-position="right" v-on:keyup="handleChange" :min="1"></el-input-number>

methods: {
    handleChange: function(value) {
        let vm = this;
        console.log(value);
        const result = value.toString().replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            Vue.nextTick()
            .then(function () {
                vm.form.qty = result
            });
    },
}

问题

目前，当我输入数字时没有逗号添加到输入字段，但是当我将我的值发送到后端时，它会用逗号发送它。。 p>

我需要什么

我需要的是与我上面解释的完全相反的行为，

1. 在视图中显示带逗号的数字
2. 不带逗号将其发送到后端

有什么想法吗？

Answer 1

我不使用 ElementUI，因此我无法确认 el-input-number 是否会接受格式化的字符串值。该组件可能会在内部从 value 属性中删除所有非数字字符。但是，以下解决方案适用于标准文本输入。

为了显示不同于您存储的内容，您需要将v-model 指令拆分回其原始部分。 v-model 只是在单个指令中绑定 value 和 @input 的快捷方式。您应该将未格式化的数字存储在 form.qty 字段中，但通过计算属性为 el-input-number 组件提供格式化数字，如下所示：

<template>
  <!-- INSTEAD OF v-model, use :value and @input -->
  <el-input-number :value="formattedQty" @input="handleQtyInput" />
</template>

<script>
export default {
  data () {
    return {
      form: {
        qty: "0",
      }
    }
  },

  computed: {
    formattedQty () {
      //Add the commas back to the string
      let qty = this.form.qty + ""
      return qty.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  },

  methods: {
    handleQtyInput (newValue) {
      //Make sure the stored qty is not formatted
      this.form.qty = newValue.toString().replace(/\D/g, "")
    }
  }
}
</script>

Answer 2

我认为这只是反应性问题，而不是使用 = use $set。

handleChange(value) {
        console.log(value);
        let vm = this;
        let res = value.toString().replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        console.log(res)
        this.$set(this.form,'num',res);

      }

小提琴 - https://jsfiddle.net/PratikPatel227/tLx3z96a/28/

发送数据时使用 - this.form.num.replace(/,/g, '')