Десятичное форматирование в Vue Framework

Question

Я новичок в Vue Framework. Мое требование - добавить форматирование денежной валюты в поле ввода.

Форматирование:
Мне нужно добавить десятичную дробь с двумя нулями при фокусировке и удалить ноль при фокусировке. Значение v-modal не должно меняться, так как этот формат предназначен только для отображения пользователем.

Я нашел это решение, которое довольно близко к моему требованию: https://jsfiddle.net/mani04/w6oo9b6j. Есть только две дополнительные вещи, которые я не могу реализовать.

Я хочу использовать это как:

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric” ></my-currency-input>

1. Я добавил vee-validate.js lib для проверки всей моей формы. Так как же я могу использовать v-validate в этом примере?
2. Я не хочу округлять мою строку. Нам просто нужно добавить и удалить (.00) Здесь, если пользователь вводит 35.7896, он делает это 35.79. Для моего требования это должно остаться 35.7896, поскольку у этого уже есть десятичное число. Следует добавлять только десятичную дробь, когда пользователь вводит число.

Как я могу это сделать? Должен ли я использовать директиву Vue для этого?

https://jsfiddle.net/mani04/w6oo9b6j/

Как то так хочу

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric” ></my-currency-input>

Answer 1

Я думаю, вы можете использовать {{ parseFloat.($ Variable).toFixed(2) }}, это просто для десятичных чисел для vue.js . вы можете попробовать это.

Answer 2

      methods: {
  formatNumber (num) {
    return parseFloat(num).toFixed(2)
  },
}

в шаблоне

      {{ formatNumber($variable) }} 

Answer 3

Вам не нужен метод фокусировки / фокусировки. Что вам нужно, это вычисляемое свойство. Попробуйте это:

Vue.component('my-currency-input', {
    template: `
        <div>
            <input type="text" v-model="currencyValue" /> {{ formattedCurrencyValue }}
        </div>`,
    data: function() {
        return {
            currencyValue: 0,
            /* formattedCurrencyValue: "$ 0.00" */
        }
    },
    computed: {
        formattedCurrencyValue: function(){
        if(!this.currencyValue){ return "$0.00"}
            return "$" + parseFloat(this.currencyValue).toFixed(2)
        }
    }
});

new Vue({
    el: '#app'
});