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

见工作小提琴：http : //jsfiddle.net/bvr9754h/

您必须在适当的组件中定义如下计算属性：

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