Nuxt 3中Pinia Store绑定的Checkbox无法勾选问题求助

问题根源 #

你同时给复选框设置了:checked和v-model，这两个指令会产生冲突。v-model本身已经包含了复选框选中状态的绑定和值更新逻辑，手动添加:checked会覆盖v-model的初始状态绑定行为，导致页面加载时复选框无法根据Store值自动勾选。

解决方案 #

1. 移除冲突的:checked绑定
   只保留v-model即可，它会自动处理选中状态的同步和值更新。

2. 确保组件正确初始化Store
   在组件的<script setup>中正确引入并实例化Pinia Store。

完整代码示例 #

<template>
  <input 
    type="checkbox" 
    class="form-check-input" 
    id="checkActive"
    v-model="labelStore.active"
  >
  {{ labelStore.active }}
</template>

<script setup>
// 引入Store，路径根据你的项目结构调整
import { useLabelStore } from '@/stores/label'
const labelStore = useLabelStore()
</script>

额外说明 #

如果需要解构Store中的state属性（比如想直接用active而不是labelStore.active），要使用Pinia提供的storeToRefs工具，确保解构后的属性保持响应式：

<script setup>
import { useLabelStore } from '@/stores/label'
import { storeToRefs } from 'pinia'

const labelStore = useLabelStore()
// 解构出响应式的active属性
const { active } = storeToRefs(labelStore)
</script>

此时模板中可以直接写v-model="active"。

内容的提问来源于stack exchange，提问作者Jordi Tomàs Molina