Laravel + VueでDBから取得したデータをv-selectでセレクトボックスとして扱いたい

Question

実現したいこと

LaravelでDBから取得したデータをVue側でv-selectを使用してセレクトボックスとして扱いたい

前提

Laravel
Vuejs

Laravelでカテゴリの一覧をDBから取得
取得したデータを返す
返ってきたデータをVuejsで受け取り、v-selectを使用し、セレクトボックスとして扱おうと試みています

発生している問題・エラーメッセージ

セレクトボックス内を確認すると中身が表示されない
添付にあるcategoriesはDBから取得したデータ（見にくくてすみません）
選択肢の数が要素数となっているため、値の受け渡しはできているようだが、表示がされない

該当のソースコード

    public function create()
    {
        $categories = Category::all();

        $data = [
            'categories' => $categories,
        ];
        return $data;
    }

    export default {
        data: function () {
            return {
                categories: []
            }
        },
        methods: {
            getParameters() {
                axios.get('/api/blog/create')
                .then((res) => {
                    this.categories = res.data.categories;
                 });
            }
        },
        mounted() {
            this.getParameters();
        }
    }

        categories： {{ categories }}
        <v-select
          label="カテゴリ"
          v-model="selected"
          :items="categories"
          item-text="name"
          item-value="id"
          name="category_id"
          variant="underlined"
          return-object
        ></v-select>

試したこと

v-selectの扱い方を調べた結果、入力フォームのvalueにあてたいものにはitem-value、表示させたいものにはitem-textに記載すればいいようだが、その通りにしても表示されない
参考：
https://qiita.com/akido_/items/96ced6cd5fd9929c666f

補足情報（FW/ツールのバージョンなど）

Laravel 10.13.0
vue 3.3.4

npm list vue実行結果↓

+-- @tinymce/tinymce-vue@5.1.0
| `-- vue@3.3.4
|   `-- @vue/server-renderer@3.3.4
|     `-- vue@3.3.4 deduped
+-- @vitejs/plugin-vue@4.2.3
| `-- vue@3.3.4 deduped
+-- vue-router@4.2.2
| `-- vue@3.3.4 deduped
`-- vuetify@3.3.2
  `-- vue@3.3.4 deduped

Laravelについてはある程度扱ってきましたが、vueに関しては学習中の身です。
お手柔らかに回答いただければと思います。

以上、よろしくお願いいたします。

Answer 1

vuetify3を使用しているならitem-textは対応していません。item-titleとする必要があるようです。

Vuetify3.0betaでv-selectのitem-textが表示されない場合の対応

あと、せっかくVuetify3を使っているならVue3.2以上の方が書きやすいとは思います。

getParameterの中はフロントエンド処理の結果を流す場所なので任意に書き換えてください。

<template>
<div class="about">
  <p>選んだもの:{{selected}}</p>
  <v-select
    item-title="name"
    item-value="id"
    :items="categories"
    label="カテゴリ"
    v-model="selected"
  >
  </v-select>
</div>
</template>
<script setup>
import { reactive,ref,onMounted} from 'vue'
const selected = ref(null) //Vue3.2以上でv-modelを使用する場合ref定義が必要
const data = [
  {id:1,name:"カテゴリ１"},
  {id:2,name:"カテゴリ２"},
  {id:3,name:"カテゴリ３"},
  {id:4,name:"カテゴリ４"}
]
const categories = reactive([])
const getParameters =()=>{
  Object.assign(categories,data)
}
onMounted(()=>{
  getParameters();
})
</script>

Comments

[tomtom123]

こちら参考に問題解消できました。
貴重なご意見ありがとうございます！
助かりました。