Vue动态引用json数据的两种方式

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

<template>
  <div>
    <h3>JSON 数据列表</h3>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
// 引入 JSON 文件
import jsonData from '@/assets/data.json';

export default {
  data() {
    return {
      jsonData, // 将 JSON 数据绑定到组件的 data 中
    };
  },
};
</script>

<template>
  <div>
    <h3>JSON 数据列表</h3>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: [], // 初始化为空数组
    };
  },
  mounted() {
    // 使用 fetch 加载 JSON 文件
    fetch('/data.json') // public 文件夹下的文件可以直接通过根路径访问
      .then((response) => response.json())
      .then((data) => {
        this.jsonData = data; // 将数据赋值给 jsonData
      })
      .catch((error) => {
        console.error('加载 JSON 文件失败:', error);
      });
  },
};
</script>