Vue.Js 2 Формат ввода номера - PullRequest
Новая
       31

Vue.Js 2 Формат ввода номера

0 голосов
/ 22 ноября 2018

Я изо всех сил пытался получить числовой ввод для форматирования чисел, используя vuejs2.

Перенос некоторой логики представления из asp.net core 2 в vue, и я использовал это: 

<input asp-for="Model.LoanAmount" value="@(Model.LoanAmount > 0 ? Model.LoanAmount.ToString("N2") : String.Empty)" >

но это потребовало от меня перезагрузки этого представления для замены ввода.

Мне нужен способ форматирования числовых входов в формате США с двумя десятичными разрядами (1 000 000,21), но ничего не отображается, когда значение модели равно нулю илипусто.
vue-numeric делает ПОЧТИ все, но у меня не получается, когда я пытаюсь использовать заполнитель. 

<vue-numeric v-model="vm.loanAmount" seperator="," placeholder=" " :precision="2" ></vue-numeric>

Я пытался использовать пробел для заполнителя, потому что он вылетает приЯ использую пустую строку.В этом примере отображается 0,00, если введен ноль или пуст.Я пытался играть с типом вывода и пустым значением реквизитами.

Я не привязан к vue-numeric, но это удобно, потому что я незнать более удобное решение.

1 Ответ

0 голосов
/ 22 ноября 2018

Вы можете выполнить форматирование, просто используя свойство computed с отдельными getter и setter без необходимости использования других зависимостей. 

computed: {
  formattedValue: {
    get: function() {
      return this.value;
    },
    set: function(newValue) {
      if (newValue.length > 2) {
        newValue = newValue.replace(".", "");
        this.value =
          newValue.substr(0, newValue.length - 2) +
          "." +
          newValue.substr(newValue.length - 2);
      } else {
        this.value = newValue;
      }
    }
  }
}

https://codesandbox.io/s/p7j447k7wq

Я добавил десятичный разделитель только в качестве примера, вам придется добавить разделитель , тысяча в сеттер для полной функциональности.

...