VueJS v-model 值到另一个输入

Question

我有两个输入，第一个：

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

第二个：

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

如果我在 from_amount 中输入数字，它应该在 to_amount

中输出

这是我的 VueJS 代码：

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

但是用Vue好像不行？

Answer 1

您需要使用 v-bind，将计算的属性绑定到输入字段，如下所示：

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

或者简而言之，你也可以写成

 ... :value="calculatedFromAmount">

查看工作 fiddle：http://jsfiddle.net/bvr9754h/

您必须定义计算属性就像在适当的组件中一样：

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

Answer 2

很有可能。

修改您的代码，使 to_amount 成为计算的属性的名称：

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

和 html 到 :

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

VueJS v-model 值到另一个输入

VueJS v-model value in to another input

javascript

laravel

vue.js

vuejs2