Vue.js单选按钮重置：点击重置按钮恢复默认选中项

当前代码的问题在于uncheckAll方法把selected设为false，导致所有单选按钮取消选中。要实现恢复默认选中值的需求，按以下步骤修改：

• 第一步：在Vue的data里新增变量保存初始默认值，避免硬编码，方便后续修改
• 第二步：修改uncheckAll方法，将selected重置为预先保存的默认值，同时重置previous变量避免干扰后续操作

修改后的完整代码如下：

HTML代码 #

<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val" @click="uncheck( val )">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Reset</button>
</div>

JS代码 #

var app = new Vue({
    el: '#app',
    data: {
        list: ['one', 'two', 'three'],
        selected: 'two',
        defaultSelected: 'two', // 新增：保存初始默认值
        previous: null,
    },
    methods: {
        uncheck: function(val) {
            if (val == this.previous) {
                this.selected = false;
            }
            this.previous = this.selected;
        },
        uncheckAll: function() {
            this.selected = this.defaultSelected; // 改为重置到默认值
            this.previous = this.defaultSelected; // 同步重置previous，避免后续点击异常
        },
    }
})

这样修改后，点击Reset按钮就会自动选中初始默认的'two'选项，同时不会影响原有的单选按钮点击取消功能。

内容的提问来源于stack exchange，提问作者Mitali Patel