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

проблема

В настоящее время, когда я набираю цифры , в поле ввода не добавляется запятая , но когда я отправляю свои значения на сервер, он отправляет их с запятыми .

Что мне нужно

Мне нужно совершенно противоположное поведение, чем я объяснил выше,

1. показывать числа с запятыми
2. отправить его на сервер без запятых

Есть идеи?

Answer 1

Я не использую ElementUI, поэтому не могу подтвердить, что el-input-number примет отформатированное строковое значение. Возможно, этот компонент внутренне удалит все нечисловые символы c из проповеди 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

Я думаю, что это просто проблема реактивности вместо использования = использовать $ 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);

      }

Fiddle - https://jsfiddle.net/PratikPatel227/tLx3z96a/28/

при отправке данных - this.form.num.replace(/,/g, '')