vue for遍历 checkbox 无法单选

你可以使用v-model来绑定checkbox的值，然后在遍历时，给每个checkbox设置一个唯一的key值，这样就可以实现单选了。具体实现可以参考以下代码：

<template>
<div>
<div v-for="(item, index) in checkboxList" :key="index">
<input type="checkbox" :id="'checkbox'+index" :value="item.value" v-model="selected">
<label :for="'checkbox'+index">{{ item.label }}</label>
</div>
</div>
</template>

<script>
export default {
data() {
return {
checkboxList: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selected: ''
}
}
}
</script>

相关问题

vue for遍历checkbox 触发

可以使用v-for指令遍历一个包含多个checkbox的数组，然后在每个checkbox上绑定一个v-model指令来实现双向绑定。当用户勾选或取消勾选checkbox时，对应的数据项的值也会相应地改变。例如：

<template>
  <div>
    <label v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked">
      {{ item.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { label: '选项1', checked: false },
        { label: '选项2', checked: false },
        { label: '选项3', checked: false }
      ]
    }
  }
}
</script>

vue中for遍历map集合

在 Vue 中遍历 Map 集合可以使用 `v-for` 指令和 `...` 扩展运算符。

首先，需要将 Map 转为数组，然后再使用 `v-for` 指令对数组进行遍历。可以使用 `...` 扩展运算符将 Map 转为数组，如下所示：

const myMap = new Map()
myMap.set('key1', 'value1')
myMap.set('key2', 'value2')

const myArray = [...myMap]

然后，在 Vue 模板中使用 `v-for` 遍历 `myArray` 数组即可：

<ul>
  <li v-for="(item, index) in myArray" :key="index">
    {{ item[0] }}: {{ item[1] }}
  </li>
</ul>

在上面的模板中，`item` 表示数组中的每个元素，`item[0]` 表示 Map 中的键，`item[1]` 表示 Map 中的值，`index` 表示当前元素的索引。

这样就可以在 Vue 中遍历 Map 集合了。