What is the correct way to access a Pinia store in a prop for a Vuetify component?

125 Views Asked by At

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?

0

There are 0 best solutions below