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 !== 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を消してみたりしましたが、うまくいきませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

自己解決

item-textは、nuxt2での利用になり、nuxt3だと、item-titleになるそうなので、変えたところうまくいきました。

<template>
  <v-container>
    <v-row class="d-flex flex-wrap justify-center">
      <v-col cols="auto">
        <v-form>
          <v-select
            v-model="store.$state.results"
            :items="store.$state.displayData"
            label="表示数"
            item-title="text"
            item-value="value"
            outlined
          ></v-select>
        </v-form>
      </v-col>
      <v-col cols="auto">
        <v-form>
          <v-select
            v-model="store.$state.sort"
            :items="store.$state.changeOrderData"
            label="並び順"
            item-title="text"
            item-value="value"
            outlined
          ></v-select>
        </v-form>
      </v-col>
      <v-col cols="auto">
        <v-form>
          <v-select
            v-if="store.$state.searchOption === 'yahoo'"
            v-model="store.$state.genre"
            :items="store.$state.yahooCategory"
            label="ジャンル"
            item-value="value"
            item-title="text"
            outlined
          ></v-select>
          <v-select
            v-if="store.$state.searchOption === 'rakuten'"
            v-model="store.$state.genre"
            :items="store.$state.rktCategory"
            label="ジャンル"
            value="title"
            outlined
          ></v-select>
        </v-form>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <p
          v-if="
            store.$state.productList.length !== 0 ||
            store.$state.rktProductList.length !== 0
          "
        >
          {{ store.$state.productsPerPage }}件表示
          {{ store.$state.totalProductsNum }}件ヒット
        </p>
      </v-col>
    </v-row>
  </v-container>
</template>

store

 displayData: [
      { text: "表示数", value: 0 },
      { text: "5件", value: 5 },
      { text: "10件", value: 10 },
      { text: "15件", value: 15 },
      { text: "20件", value: 20 },
    ],
    changeOrderData: [
      { text: "並び替え", value: "title" },
      { text: "おすすめ", value: "reccomend" },
      { text: "レビューが多い順", value: "popular" },
      { text: "価格が安い順", value: "cheapest" },
      { text: "価格が高い順", value: "expensive" },
    ],

投稿2024/06/27 03:09

mknkgwr

総合スコア2