@choupa
Архитектор (обычный, который строит)

Как форматировать значение цены в input связанное с численным значением с помощью v-model?

Есть input с ценой, он связан в числовой переменной
<input v-model = "price">

Я хочу сделать так, чтобы пока у инпута нет фокуса, то содержимое форматировалось: "12 345 руб.", а как только у инпута оказывался фокус ввода, то форматирование отменялось: "12345". После окончания ввода (потери фокуса), форматирование возвращалось.

Для форматирования цены у меня есть метод Number.rub(), который делает так
price = 12345;
console.log( price.rub() );     // 12 345 руб.


Вопрос, как сделать такое форматирование?

UPD: Раньше делал так
<input 
   v-model = "price"
   @focus = "price = price._rub()"
   @blur = "price = price.rub()"
>

где _rub() делает обратно из форматированной цены (из строки) снова число. Но, согласитесь, такой способ — это полный отстой, т.к. меняется туда-сюда тип переменной price.
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Сделайте два разных (реально, конечно, это будет один и тот же) input'а, которые будут переключаться с помощью v-if/v-else - один для показа форматированного значения, другой для редактирования:

<input v-if="edit" v-model="price" @blur="edit = false">
<input v-else :value="formatPrice(price)" @focus="edit = true">

data: () => ({
  edit: false,
  price: 666,
}),
methods: {
  formatPrice: price => `${(+price).toLocaleString()} руб.`,
},

https://jsfiddle.net/j6tf20cg/

UPD. Можно и одним обойтись, но без v-model.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы