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

Question

[Николай Чуприк]

Есть 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.

Comments

[Alex]

Зря усложняете жизнь себе и пользователям. Просто сверстали бы примерно так и всё.

Answer 1

[0xD34F]

Сделайте два разных (реально, конечно, это будет один и тот же) 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.

Comments

[Николай Чуприк]

Оно конечно хорошо. Вот только у меня этих цен на странице целая куча. Поэтому флагов edit тоже появится целая прорва.

[0xD34F]

Николай Чуприк, ссылку-то откройте, она тут не просто так.

[Николай Чуприк]

0xD34F, Спасибо, понятно. У меня всё несколько сложнее, т.к. цен много и они разной природы, и живут не в одном массиве.

[Николай Чуприк]

0xD34F, Видимо надо делать вместо price, что-то типа price = { num: 12345, txt: '12 345 руб.' }, вычислять их автоматически и тогглить инпут, как вы сделали.

[0xD34F]

Николай Чуприк, компонент сделайте. "Природу" цен можно будет указывать посредством параметров.

[Николай Чуприк]

0xD34F, вот сделал: https://jsfiddle.net/jr2peo8v/
Проблема — задать начальное форматирование. Не подскажите?

[Николай Чуприк]

0xD34F, решено: https://jsfiddle.net/gejbtp31/3/
Нельзя сказать, что элегантно. Спасибо вам за труды и внимание.