vueでproxyオブジェクトのプロパティの値を表示させたい

Question

前提

vue3のオブジェクト操作にかんして質問があります。

データベースからidが最大のレコードを取得してそれをブラウザにひょうじするプログラムを作成しています。
以下プログラムです。

<script setup>
    import { ref, reactive, onMounted } from "vue"

    const category = ref('')

    onMounted(() => {

        axios.get('/api/top')
            .then((res) => {

            category.value = res.data
            console.log(category)
            console.log(category.value)
            console.log(category.value[0])
            console.log(category.value[0].title)
        })
    })
</script>
<template>
  <div>{{ category.value.title }}</div>
</template>

console.logでデバッグすると以下の画像のように表示されます。

この画像は　
console.log(category)
console.log(category.value)
console.log(category.value[0])
console.log(category.value[0].title)
の出力の結果です。

<template> <div>{{ category.value.title }}</div> </template> として、ブラウザにレコードのタイトル　(dfgh)を表示させたいのですが上記のコードでは以下のエラーが表示されます。

CategoryTopComponent.vue:31 Uncaught TypeError: Cannot read properties of undefined (reading 'title')
    at Proxy._sfc_render (CategoryTopComponent.vue:31:24)

またサーバ側での処理はlaravelを使用しています。
一番idの大きいデータをフロント側へ送っています。

    public function top()
    {
        $maxId = Category::max('id');


        return Category::where('id', '=', $maxId)->get();

    }

<div>{{ category.value[0].title }}</div>

などのいろいろな書き方でためしたのですがうまくいきませんでした。

laravel9, vue3を使用しており
componentAPI,OptionsAPIどちらの書き方でも試しましたが、レコードのタイトルを表示することはできませんでした。
どうぞよろしくおねがいいたします。

Answer 1

mountedなどに書いた場合、axiosのような非同期通信はページ読み込み後に通信が完了し、値があとから挿入されます。
categoryの中身は最初に空文字で定義されているので、
ページ読み込み時はstringのために「.title」なんてないよ〜というエラーがでているのではないでしょうか。

例えば以下のように、通信が終わるまでローディング表示とv-if分岐するのはよくやります。

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error!</div>
  <div v-else>
    <p>{{ data.firstName }} {{ data.lastName }}</p>
  </div>
</template>

loadingは別途定義、{{ data.firstName }} などの部分が、{{ category.value[0].title }} になるイメージですかね。
▼上記を拝借した記事
https://zenn.dev/azukiazusa/articles/ref-vs-article#composables-%E9%96%A2%E6%95%B0%E3%81%A8%E3%81%97%E3%81%A6%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AF%E5%B8%B8%E3%81%AB-ref-%E5%9E%8B%E3%81%A8%E3%81%99%E3%82%8B

質問の意図とは外れます＆ 私はあまりrefを使わないので詳しくはないのですが、
・最初に空文字(string型)で宣言してよいのか？（console見る限りデータはArray）
※データがひとつでいいならば、普通はArrayから取り出して扱った方が扱いやすいと思います
・templateで引用する際は valueは不要？
なども気になりましたので、上記の記事などを参考に一度みてみるといいかもしれません。

Comments

[tou.23.bc]

コメントありがとうございます。
なすすべなく放置していたのですが、いただいたコメントを参考にもう一度トライしたいと思います！