使用 Vuex getter 进行 Vuetify Select

Posted 2023-02-22

【中文标题】使用 Vuex getter 进行 Vuetify Select

【英文标题】：Vuetify Select with Vuex getters

【发布时间】：2019-07-19 03:11:51

【问题描述】：

我正在使用 Vuex，并且我有一个返回数组的 getter。我在 vuetify 下拉选择中使用这个数组。我需要在数组的第一个添加一个附加属性。当我这样做时，我只会从我的计算属性中返回一个数字。

这是我的代码：

Vuetify 选择：

<v-select
 v-on:change="setGame"
 v-model="gameid"
 :items="games"
 item-text="gametitle"
 item-value="gid"
 label="Select Game"
 ></v-select>

计算属性：

games()
    return this.$store.getters.games.unshift( 'gametitle': 'All Games', gid: null );

可以正常工作的原始返回语句 return this.$store.getters.games

错误：

[Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Number with value 3.

found in

---> <VSelect>
       <VToolbar>
         <Navbar> at src/components/layout/Navbar.vue
           <VApp>
             <App> at src/App.vue
               <Root>

【参考方案1】：

我刚刚想通了。我需要使用 concat 而不是 push。这是我的最终代码：

games()
    var selectAllGames = [
        'gametitle': 'All Games', gid: null
    ]
    return selectAllGames.concat(this.$store.getters.games);