Vue.js无法通过JSON文件数据渲染生成div列表问题求助

问题排查与修复方案 #

存在的问题 #

• 模板结构错误：你当前把<template>标签嵌套在了<section>内部，且存在多余的</div>闭合标签，结构嵌套混乱导致模板无法被Vue正常解析。Vue单文件组件的<template>是根级标签，所有DOM内容要放在它内部。
• v-for未绑定唯一key：Vue要求列表渲染的v-for必须绑定唯一key属性，否则会触发渲染异常。
• 文件名大小写不匹配：你代码中导入的是./json/lista.json，但你给出的JSON文件名为List.json，大小写不一致会导致文件加载失败，尤其是在Linux等大小写敏感的运行环境下。
• JSON格式合法性问题：你给出的JSON示例中的...是省略符号，实际文件中不能存在该符号，要保证所有对象逗号分隔正确，没有语法错误。
• 如果你的代码不是运行在Vue-cli/Vite等构建的脚手架环境中，直接写import导入JSON是不生效的，需要用请求方法动态加载JSON文件。

修正后的单文件组件代码（脚手架环境适用） #

<template>
  <section>
    <div class="question-box" style="width: 30vw; margin-left: auto; margin-right: auto;">
      <div class="question" v-for="data in myJson" :key="data.name">
        <img class="question-icon" src="../img/consiliu.png" alt="问题图标">
        {{data.name}}
      </div>
    </div>
  </section>
</template>

<script>
// 此处路径要和实际JSON文件的路径、大小写完全一致
import json from './json/lista.json'
export default{
  data(){
    return{
      myJson: json
    }
  }
}
</script>

普通HTML引入Vue场景的修复方案 #

如果不是脚手架环境，不能直接用import导入JSON，改为动态请求加载：

<div id="app">
  <section>
    <div class="question-box" style="width: 30vw; margin-left: auto; margin-right: auto;">
      <div class="question" v-for="data in myJson" :key="data.name">
        <img class="question-icon" src="../img/consiliu.png" alt="问题图标">
        {{data.name}}
      </div>
    </div>
  </section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data(){
    return{
      myJson: []
    }
  },
  mounted(){
    // 此处路径要和实际JSON文件的路径、大小写完全一致
    fetch('./json/lista.json')
      .then(res => res.json())
      .then(data => {
        this.myJson = data
      })
  }
})
</script>

内容的提问来源于stack exchange，提问作者Danu G