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

【问题标题】：Vue.js error [Error when rendering root instance] due to async JSON loading由于异步 JSON 加载，Vue.js 错误 [渲染根实例时出错]
【发布时间】：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); }

标签： json ajax vue.js getjson vuejs2

【解决方案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>

【讨论】：