从JSON文件NodeJS在vueJS中显示数组

const fs = require('fs');

// 读取JSON文件
const jsonData = fs.readFileSync('data.json', 'utf-8');

// 解析JSON数据为JavaScript对象
const data = JSON.parse(jsonData);

// 在Vue组件中定义props
props: {
  data: {
    type: Array,
    required: true
  }
}

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    jsonData: []
  },
  mounted() {
    // 在mounted钩子中读取JSON数据并传递给组件
    const jsonData = fs.readFileSync('data.json', 'utf-8');
    this.jsonData = JSON.parse(jsonData);
  }
});