Javascript Vue.js を使って非同期でデータを表示する - 物理の駅 Physics station by 現役研究者

Vue.js を使って非同期でデータを表示する。

v-if で表示の条件分岐ができるようだ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js test step-10</title>
    <script type="importmap">
        { "imports": {
            "vue":        "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        } }
      </script>
</head>
<body>
    <script type="module">
/*ここは下のJavascriptをコピペする*/
    </script>

    <div id="app">
        <p>Todo id: {{ todoId }}</p>
        <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
        <p v-if="!todoData">Loading...</p>
        <pre v-else>{{ todoData }}</pre>
    </div>
</body>
</html>

<script type="module">と</script> の間は以下のように書く。

    <script type="module">
        import { createApp, ref, watch } from 'vue'

        createApp({
            setup() {
                const todoId = ref(1)
                const todoData = ref(null)

                async function fetchData() {
                    todoData.value = null
                    const res = await fetch(
                        `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
                    )
                    todoData.value = await res.json()
                }

                fetchData()
                watch(todoId, fetchData)
                return { todoId, todoData }
            }
        }).mount('#app')
    </script>