由于异步 JSON 加载，Vue.js 错误 [渲染根实例时出错]

Posted 2023-02-22

【中文标题】由于异步 JSON 加载，Vue.js 错误 [渲染根实例时出错]

【英文标题】：Vue.js error [Error when rendering root instance] due to async JSON loading

【发布时间】：2017-08-11 17:35:26

【问题描述】：

我正在使用 vue js 构建一个应用程序。在应用程序中，我从 JSON 文件中获取所有数据，当我尝试使用 jQuery 的 getJSON() 方法加载 JSON 文件时，它会在呈现网页时抛出错误

渲染根实例时出错：vue.js:2229 Uncaught TypeError: 无法读取 null 的属性“标题”

我的理解是，我正在使用 jQuery 的 getJSON() 方法（这是一种异步方法）在“创建的方法”中加载 json 文件，因此 vue js 会在创建 vue 实例后立即尝试在我的模板中填充 json 数据而无需等待对于 json 文件的 100% 加载，因此它会抛出错误“无法读取 null 的属性 'title'”，因为我已将数据模型的初始值设置为 null。我对么？如果是，那么我该如何避免呢？一种方法是使用“同步 ajax 请求”，这在我的情况下运行良好，但我认为在 2017 年仍然使用同步请求不是一个好主意！因为如果 JSON 文件的加载时间过长，它会让用户感到沮丧。各位大侠帮帮我

使用 jQuery 的 getJSON() 方法的示例：

var viewModel = new Vue(
  el: '#templateBody',

  data: 
    jsonData: null
  ,
  created: function() 
    var self = this;
    self.fetchJSONData();
  ,
  methods: 

    fetchJSONData: function() 

      var self = this;
      $.getJSON("data.json", function(data, status, xhr) 
        if (status == "success") 
          self.jsonData = data;
         else 
          console.log("JSON data not Loaded.");
        
      );
    
  
);

JSON: 
  "title": "Tilte Text",
  "bodyText": "Body text",
  "_classes": 
    "titleClass": "className"
  

<div id="templateBody">
  <h1 id="title" v-if="jsonData.title" :class="jsonData._classes.titleClass"> jsonData.title </h1>
</div>

【问题讨论】：

使用v-if="jsonData"而不是jsonData.title，因为jsonData一开始还没有定义。

您能否在真实情况下将 console.log data 写入 fetchJSONdata 方法中的 if 语句？

@VincentT 我已经更新了我的代码 sn-p（之前我认为它不相关），在这种情况下，如果我用 "jsonData" 替换 "jsonData.title" 然后它开始抛出 "not类绑定中“jsonData._classes.titleClass”的定义”错误。

@BelminBedak 当我在 fetchJSONdata() 方法内部但在 getJSON() 方法外部 console.log 数据时，它会记录空值。

我的意思是在这里控制台日志数据if (status == "success") self.jsonData = data; console.log(data);

【参考方案1】：

工作解决方案：

代码中的问题是数据模型中jsonData的初始值为空。如果我们替换空值 jsonData(jsonData: null) 带有 empty object(jsonData: ) 那么我们不会得到错误

未捕获的类型错误：无法读取 null 的属性“标题”

我的理解是，当我们写 v-if="jsonData.title" 时，vue 会将 jsonData 视为一个 javascript 对象，并试图找到 的值>title，但我们已经为它分配了空值，这就是它返回 TypeError 的原因。这不是 aysnc 加载 JSON 文件的问题。

var viewModel = new Vue(
  el: '#templateBody',

  data: 
    jsonData: 
  ,
  created: function() 
    var self = this;
    self.fetchJSONData();
  ,
  methods: 

    fetchJSONData: function() 

      var self = this;
      $.getJSON("data.json", function(data, status, xhr) 
        if (status == "success") 
          self.jsonData = data;
         else 
          console.log("JSON data not Loaded.");
        
      );
    
  
);

JSON: 
  "title": "Tilte Text",
  "bodyText": "Body text",
  "_classes": 
    "titleClass": "className"
  

<div id="templateBody">
  <h1 id="title" v-if="jsonData.title" :class="jsonData._classes.titleClass"> jsonData.title </h1>
</div>