javascript - Vue，绑定(bind)输入以选择选项

Question

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

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

这是笔: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

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