如何清除选择框值更改上的单选按钮?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>