Alexander Kim Alexander Kim - 1 year ago 169
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
it should be outputted in

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 Source

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:

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

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