Vuetify/Nuxt3で、v-selectが表示されない。

実現したいこと

Vuetifyのv-selectで、表示件数を選べるプルダウンを表示させたいのですが、うまくいきません。

発生している問題・分からないこと

itemsに変数displayDataを指定して、item-text、item-valueも指定していますが、[object,Object]とy表示されてうまくいきません。

該当のソースコード

TypeScript

1<template>2 <v-container>3 <v-row class="d-flex flex-wrap justify-center">4 <v-col cols="auto">5 <v-form>6 <v-select 7 v-model="store.$state.results"8 :items="displayData"9 label="表示数"10 item-text="text"11 item-value="value"12 outlined 13 ></v-select>14 </v-form>15 </v-col>16 <v-col cols="auto">17 <v-form>18 <v-select 19 v-model="store.$state.sort"20 :items="store.$state.changeOrderData"21 label="並び順"22 item-text="text"23 item-value="value"24 outlined 25 ></v-select>26 </v-form>27 </v-col>28 <v-col cols="auto">29 <v-form>30 <v-select 31 v-if="store.$state.searchOption === 'yahoo'"32 v-model="store.$state.genre"33 :items="store.$state.yahooCategory"34 label="ジャンル"35 value="title"36 outlined 37 ></v-select>38 <v-select 39 v-if="store.$state.searchOption === 'rakuten'"40 v-model="store.$state.genre"41 :items="store.$state.rktCategory"42 label="ジャンル"43 value="title"44 outlined 45 ></v-select>46 </v-form>47 </v-col>48 </v-row>49 <v-row>50 <v-col cols="12">51 <p 52 v-if=" 53 store.$state.productList.length !== 0 ||54 store.$state.rktProductList.length !== 055 " 56 >57 {{ store.$state.productsPerPage }}件表示 58 {{ store.$state.totalProductsNum }}件ヒット 59 </p>60 </v-col>61 </v-row>62 </v-container>63</template>64 65<script setup lang="ts">66import { useIndexStore } from "~/stores/index"; // ストアのインポート67 68const store = useIndexStore();69const displayData = [70 { text: "表示数", value: 0 },71 { text: "5件", value: 5 },72 { text: "10件", value: 10 },73 { text: "15件", value: 15 },74 { text: "20件", value: 20 },75];76 77// 商品一覧を取得する78const searchProducts = async () => {79 const searchOption = store.searchOption;80 81 if (searchOption === "yahoo") {82 await store.getProductList();83 } else if (searchOption === "rakuten") {84 await store.getRktProductList();85 } else {86 return;87 }88};89 90// resultsの監視91watch(92 () => store.results,93 (val: number) => {94 if (val) {95 store.currentPageNum = 1;96 }97 }98);99</script>100

試したこと・調べたこと

上記の詳細・結果

検索しましたが、自分と同じことをしている方のコードしか見つからなかったので、どこが間違っているのかわかりません。v-modelを消してみたりしましたが、うまくいきませんでした。

補足

特になし

コメントを投稿

0 コメント