Vue，绑定输入以选择选项

Question

我在这个 vue 实例上的数据绑定仍然有一些问题。我只是想将每个选择选项与输入之一联系起来。因此，如果选择了选项值 110，那么我想显示输入的美元金额等。

我已经将我的 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" 以避免事件。