VueJS v-model 值到另一个输入

Question

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 1

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
        }
    }

Answer 2

it's very possible.

Modify your code so that to_amount is the name of the computed property :

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

and the html to :

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