javascript - 如何清除选择框值更改时的单选按钮？ VueJS2

Question

我是 JavaScript/VueJS 的新手，我需要一些帮助来在更改选择框值(办公室代码)时清除所有 radio 输入。

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

我想也许我会像这样在 Vue 实例中创建一个方法:

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

...但我不确定如何将其实现到办公室值(value)变化的观点(假设这是做到这一点的最佳方式)。

感谢您的帮助!

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>