Consider this example:
<input type="text" v-model="value">
<span>Value is: {{ value }}</span>
What I want is to put a bidirectional transformation function that would present the value in the input field in one form, but keep it in the data in another form. The simplest example would be negating numeric values: if the user inputs 5, I'd like the data to actually receive −5. What would be the best way of accomplishing that in Vue.js 1.0?
You can just write a computed property for that:
new Vue({
el: "#app",
data: {
value: 0
},
computed: {
negValue() {return -this.value}
}
})
And then the template becomes
<input type="text" v-model="value">
<span>Value is: {{ negValue }}</span>
data.value isn't negated. I need to negate the data, not the presentation of it, because the data then gets posted to the server side and that is where the minus sign is required.
negValue instead of value I don’t see the problem.You could use watchers for this.
Every time the input value changes, the watcher will update the data property value in any way you want. The input display value will stay the same, but your data property will have the new manipulated value.
For ex.:
new Vue({
el: "#app",
data: {
value: 0,
display_value: 0
},
watch: {
display_value: function (newValue) {
this.value = -parseInt(newValue);
}
}
})
And your html:
<input type="text" v-model="display_value">
<span>Value is: {{ value }}</span>
You can use a watcher to set negValue
new Vue({
el: "#app",
data: {
value: 0,
negValue: 0
},
watcher: {
value(value) {this.negValue = -value}
}
})
Then:
<input type="text" v-model="value">
<span>Value is: {{ negValue }}</span>
When you send it to server, just send negValue instead of value.
5but is-5?