How to clear radio button on select box value change? VueJS2

Question

I'm a newbie to JavaScript/VueJS and I need some help on clearing all radio inputs when a select box value (office code) is changed.

Here's my HTML/view code:

<div id="app">

<form id="myForm'>

<select id="office" v-model="selectedOffice" required>
    <option value="" selected disabled>-Select-</option>
    <option v-for="office in officeList" :value="office">{{office.code}}</option>
</select>

<section v-if="selectedOffice !== ''">
    <h2>Please specify your product type:</h2>

<div id="productsList>
    <label>
        <input type="radio" name="productType" id="book" v-model="selectedProductType"> BOOKS
    </label>
<label>
        <input type="radio" name="productType" id="magazines" v-model="selectedProductType"> MAGAZINES
    </label>

....snipped...

</form>

</div>

My model:

var vm = new Vue({
    el: '#app',
    data: {
        selectedOffice: '',
        selectedProductType: '',
        officeList: [
            { code: 'Office1' }, {code: 'Office2' }, ...snipped...
        ]

I thought maybe I'd do create a method in the Vue instance like so:

methods: {
    clearRadio: function(){
        productType.prop('checked', false);
    }
}

...but I am unsure how to implement that to the view (assuming that's the best way to do this) on office value change.

Thanks for any help!

Nitesh Chauhan Nitesh Chauhan · Accepted Answer · 2017-07-28T12:08:35

You can do this using

@change

<template>
    .....

    <select @change="clearType" id="office" v-model="selectedOffice" required>
        <option value="" selected disabled>-Select-</option>
        <option v-for="office in officeList" :value="office">{{office.code}}</option>
    </select>

    .....
</template>

<script>
    .....

    methods: {
        clearType: function(){
            this.selectedProductType = ''
        }
    }

    .....
</script>

How to clear radio button on select box value change? VueJS2

1 Answers