Vue3+Vuetify3中如何正确在v-select的:items属性访问Pinia Store

正确写法 #

直接在:items后传入store的数组变量即可，不需要额外添加花括号：

<v-select :items="schoolyearStore.schoolyears" label="School Year" required></v-select>

错误原因 #

你之前的代码:items="{{ schoolyearStore.schoolyears }}"存在语法问题：

• :items是v-bind:items的缩写，冒号后面本身就是JavaScript表达式上下文，双花括号{{ }}是用于模板文本插值的语法（比如<p>{{ year }}</p>），不能用在v-bind的属性值里。
• 当使用:items="xxx"时，xxx会被直接当作JS表达式解析，所以直接写schoolyearStore.schoolyears即可。

额外确认（确保Store在组件中正确初始化） #

虽然你用v-for能正常访问数组，还是可以确认下组件中是否正确引入并初始化了Store：

<script setup>
import { useSchoolyearStore } from '@/stores/schoolyearStore'
const schoolyearStore = useSchoolyearStore()
</script>

只要这段代码正确，上面的v-select绑定写法就能正常运行。

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