CODEWITHSUNDEEP
javascripthtmlvue.js
Geoff_S
Geoff_S

Reputation: 5107

Vue, binding inputs to select options

I'm still having some issues with data binding on this vue instance. I simply want to tie each select option to one of the inputs. So if option value 110 is selected, then I want to show input dollarAmount, etc.

I have dumbed my vue function down to just show the value in the console , which works fine so the binding is working, but I'm still not sure exactly how to tie the input (for show/hide) to the value of a select?

Here's the pen: 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)
        }
    }
})

Upvotes: 1

Views: 127

Answers (1)

men32z
men32z

Reputation: 186

I'm not sure what are you doing, but the same v-model="key" that you have in "select" you can use in the input to show the data. or just show with :value="key" to avoid events.

Upvotes: 2

Related Questions