起こったこと

Vue.jsでapiから取得したデータをtempleteで展開しようとした際にCannot read properties of undefinedのエラーが出ました。

エラーが出るコード

<template>
    {{ host.name }}
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const host = ref();
    const fetchHost = async () => {
      try {
        const response = await fetch('/api/host');
        host.value = await response.json();
      } catch (error) {
        console.error('Error fetching host:', error);
      }
    };

    onMounted(fetchHost);
};
</script>

エラーが出ないコード

templeteをプロパティ参照ではなく取得したリアクティブ変数全体を参照した場合はエラーが出ません。

<template>
    {{ host }}
</template>
....(略）

hostの全体は取得できるのに、変数全体は表示されます。host.nameを取得したいんだ...。

{ "id": 1, "ipv4": "192.168.0.1", "name": "pcname"}

原因

これはVueコンポーネントではAPIリクエストなどの非同期処理を行う場合、データがまだロードされていない状態でアクセスしてしまうためです。プロパティが参照できていないことで生じます。

解決方法

オプショナルチェーン演算子を使う（?.）

?を付けるだけ。JavaScriptのオプショナルチェーン演算子を使ってエラーを防ぎます。

<template>
  <div>{{ host?.name }}</div>
</template>

v-ifをはさむ方法

v-ifで挟むとエラーは出ませんが、ロードされていないことには変わりないので、表示されません。

<template>
  <div v-if="host">
    {{ host.name }}
  </div>
  <div v-else>
    Loading...
  </div>
</template>