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

假设你的 "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 })

Vue js 在渲染之前获取 JSON

Vue js fetch JSON before it renders

lifecycle

json

vue.js

JSON

HTML

JS

错误