Vue大喊那个对象没有被定义，同时它在要求它被加载的范围内

Question

我想做类似的事情：

• 在[]中的foreach行
• • 分析（行）
• • • 返回包含ID，类名等的div ...
• • 显示退货

但是由于某些原因，我收到了错误消息

  

[Vue警告]：渲染错误：“ TypeError：this.json [index]未定义”

如果bool dataIsLoaded应该确保已加载，那怎么可能？

---

<div id="app" v-if="dataIsLoaded">
    <div v-for="(obj, index) in json.data">
        {{ parse(index) }}
    </div>
</div>

el: '#app',
data: {
    json: null,
    dataIsLoaded: false
},
beforeCreate: function () {
    fetch("api")
      .then(r => r.json())
      .then(json => {
          this.json = json;
          this.dataIsLoaded = true;
      });
},
methods:
{
    parse: function(index)
    {
        var type = this.json[index].name;
        var body = this.json[index].age;

        (...)

        return ...
    }
}

与此同时，这种方法正常工作

<div id="app" v-if="dataIsLoaded">
    <div v-for="(obj, index) in json.data">
        {{ index }}{{ obj }}
    </div>
</div>

---

另外：

parse: function(index)
{
    console.log(index);
    var type = this.json[index].name;
    var body = this.json[index].age;

    (...)

    return ...
}

console.log（index）返回例如0，因此index具有适当的值。