Vue，将输入绑定到选择选项

Question

我在这个 vue 实例上的数据绑定仍然存在一些问题。我只是想将每个选择选项绑定到其中一个输入。因此，如果选择了选项值 110，那么我想显示输入的 DollarAmount 等。

我已将我的 vue 函数简化为仅在控制台中显示值，这工作正常，因此绑定工作正常，但我仍然不确定如何将输入（用于显示/隐藏）绑定到值一个选择？

这是笔：https://codepen.io/anon/pen/ZdyXde

<div id="discountChange" class="uk-grid">
    <div class="uk-width-1-2">
        <select name="discountChange" @change="changeDiscount" v-model="key">
            <option value="110">Dollar Amount</option>
            <option value="100">Percentage</option>
            <option value="120">Terms</option>
        </select>
    </div>
    <div class="uk-width-1-2">
        $ <input class="md-input" type="text" name="dollarAmount">
        % <input class="md-input" type="text" name="percentage">
        <input class="md-input" type="text" name="terms">
    </div>
</div>

var changeDiscount = new Vue({
    el: "#discountChange",
    data: {
    key: "",
    },
    methods: {
        changeDiscount: function() {
            console.log(this.key)
        }
    }
})

Answer 1

我不确定您在做什么，但是您可以在输入中使用与“选择”相同的 v-model="key" 来显示数据。或者只显示 :value="key" 以避免事件。