Vue.js导入JSON至HTML界面无数据问题排查与解决

问题背景 #

本人是Vue.js及HTML新手，需将指定格式的产品JSON数据导入前端界面展示。参考教程编写的代码可运行，但HTML中的textarea无法加载数据，现附上相关代码及JSON格式，请求协助解决。

指定JSON格式 #

[{"Title": "SOFT-STARTER", "Cod": "Produto: 15775931", "Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores.", "Technical_characteristics": ["Corrente nominal", "600 A", "Tensão nominal", "4,16 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP41", "Certificação", "CE"]},{"Title": "SOFT-STARTER SSW", "Cod": "Produto: 14223395", "Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores de indução trifásicos de média tensão.", "Technical_characteristics": ["Corrente nominal", "125 A", "Tensão nominal", "6,9 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP54/NEMA12", "Certificação", "CE"]}]

相关代码 #

EstepeJson.vue #

<template>
  <div class="hello">
    <textarea v-model="listDataString" rows="20" cols="80"></textarea>
    <ul id="items">
      <li v-for="(item, index) in listData" :key="index">{{ `${item.text} [${item.id}]` }}</li>
    </ul>
  </div>
</template>

<script>
import axios from "../components/DadosScrapingProdutos.js";
export default {
  name: "JsonArq",
  props: {
    msg: String,
  },
  data() {
    return {
      listDataString: '',
      listData: [], // placeholder
    };
  },
  mounted() {
    axios.get("=== [API_ENDPOINT] ===").then((response) => {
      this.listDataString = JSON.stringify(response.data, null, "\t");
      this.listData = response.data;
      console.log(this.listDataString);
      return response; // multiline arrow function must return
    });
  },
};
</script>

App.vue #

<template>
  <div class="main-container">
    <h1 style="color:#0072c6;">Hello</h1>
    <p style="text-align:center; color:#0072c6;" >
      Bem Vindo ao Autocomplete para noticiais <br>
      Team, v-1.0<br>
      <Autocomplete /><br>
      <JsonArq />
      <img src="./components/logo.png" width=250 height=200 alt="Logo WEG" >
    </p>
  </div>
</template>

<script>
import Autocomplete from './components/Autocomplete.vue'
import JsonArq from './components/EstepeJSON.vue'
export default {
  name: 'App',
  components: {Autocomplete, JsonArq}
}
</script>

<style>
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Fredoka', sans-serif;
}
h1 {
  font-size: 3rem;
}
@import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap');
</style>

问题排查与修复方案 #

1. Axios导入错误
   你当前导入的axios是本地文件../components/DadosScrapingProdutos.js，而非官方axios库。如果该本地文件未正确封装axios请求逻辑，会导致数据请求失败。

   • 修复：先通过npm install axios安装官方库，然后修改导入语句：

     import axios from 'axios';
     

     若DadosScrapingProdutos.js是自定义请求工具，需确保它返回Promise且能正常获取数据。

2. API地址未替换
   代码中axios.get("=== [API_ENDPOINT] ===")是占位符，必须替换为实际的JSON接口地址；如果使用本地JSON文件，需填写正确的相对路径（比如./data/products.json）。

3. 列表渲染字段不匹配
   v-for中使用的item.text和item.id字段在你的JSON数据中不存在，会导致列表内容为空。需替换为实际存在的字段：

   <li v-for="(item, index) in listData" :key="index">{{ `${item.Title} [${item.Cod}]` }}</li>
   

4. 添加错误捕获逻辑
   当前代码没有请求异常处理，无法排查请求失败原因。建议补充catch块：

   mounted() {
     axios.get("你的实际接口地址")
       .then((response) => {
         this.listDataString = JSON.stringify(response.data, null, "\t");
         this.listData = response.data;
         console.log(this.listDataString);
       })
       .catch(error => {
         console.error('请求数据失败:', error);
       });
   },
   

按以上步骤修改后，textarea即可正常加载JSON数据。

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