Question

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

渲染根实例时出错：vue.js：2229 Uncaught TypeError：无法阅读财产标题＆＃39;为null

我的理解是我正在加载json文件＆＃34;创建方法＆＃34;使用jQuery的getJSON（）方法，这是一个异步方法，所以vue js尝试在创建vue实例时立即填充我的模板中的json数据，而不等待json文件的100％加载，因此它会抛出错误＆＃34;无法读取属性＆＃39;标题＆＃39; of null＆＃34;因为我已将数据模型的初始值设置为null。我对么？如果是，那么我该如何避免呢？一种方法是使用＆＃34;同步ajax请求＆＃34;这在我的情况下工作正常，但我认为在2017年仍然使用同步请求不是一个好主意！因为如果JSON文件的加载持续时间很长，它会使用户感到沮丧。伙计们请帮帮我

使用jQuery的getJSON（）方法的示例：

＆＃13;

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"
  }
}

＆＃13;

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

＆＃13;

Answer 1

工作解决方案：

代码中的问题是数据模型中 null jsonData的初始值。如果我们替换空值带有空对象（jsonData：{}）的 jsonData（jsonData：null）然后我们没有收到错误

未捕获的TypeError：无法读取null的属性'title'

我的理解是，当我们写 v-if =“jsonData.title”时，vue将 jsonData 视为javascript对象并尝试查找 title 但我们已为其指定了null值，这就是它返回 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>

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

1 个答案:

工作解决方案：