Vue.jsの作業環境を作成
作業前には以下のコマンドを実行してVue.jsの作業環境を作成してください。
Node.jsを使用しているため、インストールしていなければ事前に入れてください。
npm create vite@latest vue-json -- --template vue
CSSは使わないのでmain.jsの「import './style.css'」は削除してください。
JSONを読み込んで反映させるには
App.vueにaxiosを使用して以下のように記述すればJSONを読み込んで反映できます。
Vue公式サイトのドキュメントだとfetch()が使用されていますが、axiosを使用したほうがコードが書きやすく、見やすいのです。
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const todoData = ref(null)
function getTodo() {
const url = `https://jsonplaceholder.typicode.com/todos/1`
todoData.value = null
axios
.get(url)
.then((res) => todoData.value = res.data)
.catch((error) => todoData.value = error)
}
getTodo()
</script>
<template>
<h1>Vue 3でJSONを読み込むサンプル(簡易版)</h1>
<p v-if="!todoData">Loading...</p>
<pre v-else>{{ todoData }}</pre>
</template>
v-ifで分岐させてtodoDataがnullのときはLoading...を表示させ、todoDataがあるときはtodoDataの内容を表示させています。
読み込むJSONを動的に変える
JSONのURLの最後の数字部分を動的に反映したい場合はVueのwatchを使用してrefを監視します。
todoIdの値が変化するたびにコールバックを発生させてJSONを読み込みます。
<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'
const todoId = ref(1)
const todoData = ref(null)
function getTodo() {
const url = `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
todoData.value = null
axios
.get(url)
.then((res) => todoData.value = res.data)
.catch((error) => todoData.value = error)
}
getTodo()
watch(todoId, getTodo)
</script>
<template>
<h1>Vue 3でJSONのidを変更して読み込むサンプル</h1>
<input type="number" v-model="todoId">
<p v-if="!todoData">Loading...</p>
<pre v-else>{{ todoData }}</pre>
</template>
JSONを10秒おきに読み込む方法
「const todoCount = ref(0)」を新たに定義して10秒おきにsetIntervalで変更して、watchで監視させます。
<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'
const todoId = ref(1)
const todoCount = ref(0)
const todoData = ref(null)
function getTodo() {
const url = `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
todoData.value = null
axios
.get(url)
.then((res) => todoData.value = res.data)
.catch((error) => todoData.value = error)
}
getTodo()
setInterval(() => todoCount.value++, 1000 * 10)
watch([todoId, todoCount], getTodo)
</script>
<template>
<h1>Vue 3でJSONを10秒おきに読み込むサンプル</h1>
<p>ChromeのNetworkのFerch/XHRで確認できます。</p>
<input type="number" v-model="todoId">
<p v-if="!todoData">Loading...</p>
<pre v-else>{{ todoData }}</pre>
</template>
setInterval内に直接gotoTodo()を入れても更新されないので注意が必要です。
