🖥

Nuxt3 - useFetch の data が template で使えない ( data を複数書く場合の別名の付け方 )

2023/09/01に公開

問題

複数のdata をtemplateで表示させようとして次のように書いてしまうと何も表示されない

<script setup lang="ts">
const { data1 } = await useFetch("https://jsonplaceholder.typicode.com/todos/");
const { data2 } = await useFetch("https://jsonplaceholder.typicode.com/todos/");
</script>
<template>
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</template>

data を複数使う場合

data: xxx で別名を付ける

<script setup lang="ts">
const { data: data1 } = await useFetch(
  "https://jsonplaceholder.typicode.com/todos/"
);
const { data: data2 } = await useFetch(
  "https://jsonplaceholder.typicode.com/todos/"
);
</script>
<template>
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</template>

表示例

<img width="1440" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/19877fed-15a8-468e-9c13-37641304d9d7">

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter

https://twitter.com/YumaInaura

公開日時

2023-08-12

Discussion