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: ''
        },
        puted: {
            calculate: function() {
                return (this.from_amount * 750) / 0.00024
            }
        }
})

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

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: ''
        },
        puted: {
            calculate: function() {
                return (this.from_amount * 750) / 0.00024
            }
        }
})

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

• javascript
• laravel
• vue.js
• vuejs2

Share Follow asked Dec 1, 2016 at 6:45 Alexander KimAlexander Kim 18.4k2424 gold badges107107 silver badges165165 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You need to use v-bind, to bind puted 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/bvr9754h/

You have to define puted property like following in due ponent:

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

it's very possible.

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

var request = new Vue({
el: '#request-creator',
    data: {
        from_amount: '',
    },
    puted: {
        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">