選択ボックスの値変更でラジオボタンをクリアするにはどうすればいいですか？ VueJS2

Question

私はJavaScript/VueJSの初心者です。選択ボックスの値（オフィスコード）が変更された場合、すべてのラジオ入力をクリアするための助けが必要です。

ここに私のHTML /ビューコードです：

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

マイモデル：

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

私は多分私はVueのインスタンスでメソッドを作成するのですかと思いましたように：

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

...しかし、私はオフィスの価値の変更について、これを行うには最良の方法であると仮定して、それをビューに実装する方法が不明です。

ありがとうございました！

Answer 1

あなたは

@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>