🖥

Nuxt.js で JSON ファイルを読み込んで v-for で展開する例 ( load by "require" JSON assets

2023/09/01に公開

assets/users.json

[
  {
    "id" : 1,
    "name": "Alice"
  },
  {
    "id" : 2,
    "name": "Bob"
  },
  {
    "id" : 3,
    "name": "Carol"
  }
]

pages/assets-json.vue


<template>
  <div>
    <h1>
      assset API
    </h1>
    <h2>Users</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.id }} - {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  asyncData() {
    const users = require(`~/assets/users.json`)
    return {
      users
    }
  }
}
</script>

http://localhost:3000/assets-json

image

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3135

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2020-05-05

Discussion