Vue js 在呈现之前获取 JSON答案

【问题标题】：Vue js fetch JSON before it rendersVue js 在呈现之前获取 JSON
【发布时间】：2018-02-05 23:15:49
【问题描述】：

我有一个关于获取 JSON 数据对象并在它安装之前渲染它的问题。以防万一，我正在独立开发。我认为功能没有问题。我认为这是在生活循环方面。所以我在VueJS数据实例上有一个名为listData:[]的空数组变量，this.listData.push(response.body)将对象推入其中。在 HTML 方面，我用 v-for 元素来渲染元素。它很好地显示了结果，但在控制台上，我看到'undefined' 它无法在数组中找到要循环的数据的错误消息。当然，第一次渲染时它是空数组。我不想看到这个错误。有时，它无法正确渲染.. 那么有什么解决办法吗？如果您需要更多信息。我想补充更多。谢谢。

JSON

{
  section1_header: 'A',
  section2_header: 'B',
  section3: {
   0:{
     subtitle: 'C',
     title: '4' 
     },
   1:{
     subtitle: 'D',
     title: '%' 
     },
  }
}

HTML

<div class="s3-subcontainer" v-for="(item, index) in listData[0].section3">
      <ul class="s3-script">
        <li class="s3-subtitle" v-html="item.subtitle"></li>
        <li class="s3-title" v-html="item.title"></li>
      <ul>  
 </div>

JS

 fetchJson: function () {
   this.$http.get('')
     .then(response => {
        this.listData.push(response.body);
         console.log('list', this.listData);
   })
 }

错误

【问题讨论】：

如果您的listData 最初是一个空数组，v-for 将不会对其进行迭代，并且您应该不会收到任何错误。如果不显示您的模板代码和实际的错误消息，则无法回答此问题
@Phil 是的，你是对的，对不起我的解释。我编辑了我的帖子，我无法发布整个 JSON 对象，但我正在尝试迭代嵌套对象。
您的 "JSON" 不是 JSON。好吧，无论如何都不是有效的 JSON
@Phil oops.. 我不知道为什么我把数组放在那里.. 它应该是对象。

标签： json vue.js lifecycle

【解决方案1】：

假设您的 "JSON" 实际上是一个对象而不是数组，我不明白您为什么希望 listData 成为一个数组。

因为您的v-for 表达式是listData[0].section3，您应该将初始值设置为不会导致错误的值。例如（并使其只是一个对象）...

data () { // assuming this is a component
  return {
    listData: {
      section3: []
    }
  }
}

并使用

<div class="s3-subcontainer" v-for="(item, index) in listData.section3">

我也会简单地设置listData 值，而不是尝试推送它。

.then(response => { this.listData = response.body })

【讨论】：

感谢您的回答@Phil。我不需要推送它.. 我为listData 分配了初始值，我再也看不到错误了！