Vue js在呈现之前获取JSON

Question

我有一个关于获取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);
   })
 }

错误

Answer 1

假设你的＆＃34; JSON＆＃34; 实际上是一个对象，而不是一个数组，我不明白你为什么要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 })