如何修复 <input type='radio'> 我选择一个而其他取消选择？

【问题标题】：How do i fix an <input type='radio'> where i select one and the others unselect?如何修复 <input type='radio'> 我选择一个而其他取消选择？
【发布时间】：2020-12-18 12:00:43
【问题描述】：

我对 Vue/Nuxt 比较陌生。我正在调试一组输入 type=radio 当我选择另一个选项时不会取消选择。我相信我已经将问题隔离到下面显示的这段代码中。我试图理解其他开发人员编写的代码，尤其是 v-model= $store.state.currentModefiers。当我选择其他选项时，我该如何修复这个不会取消选择其他选项的错误

<div
                  v-for="(modifier, index) in getMenuModifiers(
                    groupModifiers._id
                  )"
                  :key="'MMi' + index"
                >
                  <input
                    type="radio"
                    :id="index"
                    :ref="modifier._id"
                    :value="modifier"
                    @change="check($event)"
                    v-model="$store.state.currentModifiers"
                  />
                  <label :for="modifier._id">{{ modifier.title }}</label>
                </div>

【问题讨论】：

使用代码而不是图像的好习惯

标签： javascript vue.js nuxt.js

【解决方案1】：

据我了解，v-model 用作模型，并链接为此属性共享相同值的各种单选按钮。

您应该检查您使用的值是否与您希望在同一组中的那些单选按钮相同。

new Vue({
  el: '#sauceChoice', data: {sauce: ''}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="sauceChoice" class="demo">
  <h3>Salad Sauce</h3>
  <input type="radio" v-model="sauce" value="Blue Cheese">Blue Cheese<br>
  <input type="radio" v-model="sauce" value="Sweet Curry Mustard">Sweet Curry Mustard<br>
  <input type="radio" v-model="sauce" value="Ranch">Ranch<br>
  <br>
  <p>value: {{sauce}}</p>
</div>

来源：Vue.js > Form input Bindings > Basic Usage > Radio

【讨论】：