Alexander Kim Alexander Kim - 7 days ago 4
Javascript Question

VueJS v-model value in to another input

I have two inputs, first:

<input v-model="from_amount" id="from_amount" type="text" class="form-control" name="from_amount">


And the second:

<input id="from_amount" type="text" class="form-control" name="to_amount" value="@{{ from_amount }}">


If i type number in
from_amount
it should be outputted in
to_amount


Here's my VueJS code:

var request = new Vue({
el: '#request-creator',
data: {
from_amount: '',
to_amount: ''
},
computed: {
calculate: function() {
return (this.from_amount * 750) / 0.00024
}
}
})


But seems like it's impossible to do with Vue?

Answer

You need to use v-bind, to bind computed property to an input field like following:

<input id="from_amount" type="text" class="form-control" name="to_amount" v-bind:value="calculatedFromAmount">

or in short, you can also write

 ... :value="calculatedFromAmount">

See Working fiddle: http://jsfiddle.net/bvr9754h/

You have to define computed property like following in due component:

    computed: {
        calculatedFromAmount: function() {
            return (this.from_amount * 750) / 0.00024
        }
    }