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

i'm newbie javascript/vuejs , need on clearing radio inputs when select box value (office code) changed.

here's 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 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 create method in vue instance so:

methods: {     clearradio: function(){         producttype.prop('checked', false);     } } 

...but unsure how implement view (assuming that's best way this) on office value change.

thanks help!

you can 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>