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

Question

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

呈现根实例时出错：vue.js：2229 未捕获类型错误： 无法读取空的属性"标题">

我的理解是，我使用 jQuery 的 getJSON() 方法在"创建方法"中加载 json 文件，这是一种异步方法，因此 vue js 在创建 vue 实例后立即尝试在我的模板中填充 json 数据，而无需等待 100% 加载 json 文件，因此它会抛出错误"无法读取 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>

Answer 1

工作解决方案：

代码中的问题是数据模型中jsonData 的空初始值。如果我们替换 null 值 jsonData(jsonData： null) 与空对象 (jsonData： {})那么我们不会得到错误

未捕获的类型错误： 无法读取 null 的属性"title">

我的理解是，当我们编写v-if="jsonData.title">时，vue 将jsonData视为一个 javascript 对象并尝试查找title的值，但我们已经为其分配了 null 值，这就是它返回TypeError的原因。这不是 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>