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

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值输入到另一个输入

2 个答案: