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

Question

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

我已经将vue函数简化为仅在控制台中显示值，它可以正常工作，因此绑定可以正常工作，但是我仍然不确定如何将输入（用于show / hide）绑定到该值选择？

这是笔：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”以避免事件发生。