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>

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

1 个答案: