I am writing an app using Vue 3, Vuetify 3, and Pinia. I have successfully created my first store to contain a small array and am able to access it in my template if I use it in a <v-for>
but when I try to access it from the :items
prop of a <v-select>
, the syntax is always wrong no matter what I try.
Here's the store:
import { defineStore } from 'pinia'
export const useSchoolyearStore = defineStore('schoolyearStore', {
state: () => ({
driver: 'Hugh',
schoolyears: ["2022-2023", "2023-2024", "2024-2025"]
})
})
This code works fine and displays the array correctly:
<div class="year-list">
<div v-for="year in schoolyearStore.schoolyears" v-bind:key="year">
<p>{{ year }}</p>
</div>
</div>
But I can't figure out the correct syntax for supplying the contents of schoolyearStore.schoolyears in the :items
prop in this code:
<v-select :items="{{ schoolyearStore.schoolyears }}" label="School Year" required></v-select>
I've tried omitting the quotes, reducing the braces to one pair, putting square brackets outside of the braces, and omitting the braces entirely but everything I try produces a syntax error.
Note that this code, where I supply literal values directly to the :items prop works fine:
<v-select :items="['last year','this year','next year']" label="School Year" required></v-select>
I've been learning Pinia via a course but the course doesn't cover this exact case of trying to pass a store value to a prop. I haven't found any manuals or articles that cover this point despite several hours of trying. Can anyone tell me what I need to do?