実現したいこと
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 !== 0 55 " 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
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
検索しましたが、自分と同じことをしている方のコードしか見つからなかったので、どこが間違っているのかわかりません。v-modelを消してみたりしましたが、うまくいきませんでした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。