What is the correct way to format a v model in Vue.js 2.0

Question

For a simple example: a text field for entering currency data. The requirement is to display user input in the format "$ 1,234,567" and delete the decimal point.

I tried the vue directive. The directory update method is not called when the user interface is updated due to other controls. therefore, the value in the text box returns to that without formatting.

I also tried v-on: change the event handler. But I do not know how to call a global function in an event handler. It is not recommended to create a currency conversion method in each Vue object.

So what is the standard formatting method in Vue 2.0 now?

Hi

Answer 1

Please check this working jsFiddle example: https://jsfiddle.net/mani04/bgzhw68m/

In this example, formatted currency input is a component in itself that uses the v-model just like any other form element in Vue.js. You can initialize this component as follows:

 <my-currency-input v-model="price"></my-currency-input> 

my-currency-input is a stand-alone component that formats the currency value when the input field is inactive . When the user places the cursor inside, formatting is deleted so that the user can easily change the value.

Here's how it works:

The my-currency-input component has a computed value - displayValue , which has get and set methods. In the get method, if the input field is inactive, it returns the formatted currency value.

When the user enters an input field, the set method of the displayValue property emits a value using $emit , thereby notifying the parent component of this change.

Link to using v-model on custom components: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

Answer 2

Here is a working example: https://jsfiddle.net/mani04/w6oo9b6j/

It works by changing the input string (your currency value) during focus and focus, as follows:

 <input type="text" v-model="formattedCurrencyValue" @blur="focusOut" @focus="focusIn"/> 

• When you place the cursor in the input field, it takes this.currencyValue and converts it to normal format so that the user can change it.

• After the user types a value and clicks in another place (focus), this.currencyValue recounted after ignoring non-numeric characters, and the display text is formatted as necessary.

Currency formatting (reg exp) is a copy-paste from here: How can I format numbers like money in JavaScript?

If you do not need the decimal point that you were talking about, you can do this.currencyValue.toFixed(0) in the focusOut method.

Answer 3

I have implemented a component. According to Mani's answer, he should use $ emit.

 Vue.component('currency', { template: '<input type="text"' + ' class="form-control"' + ' :placeholder="placeholder""' + ' :title="title"' + ' v-model="formatted" />', props: ['placeholder', 'title', 'value'], computed: { formatted: { get: function () { var value = this.value; var formatted = currencyFilter(value, "", 0); return formatted; }, set: function (newValue) { var cleanValue = newValue.replace(",", ""); var intValue = parseInt(cleanValue, 10); this.value = 0; this.value = intValue; } } } } 

);