[Vue warn]：渲染错误：Vue中的“ TypeError：无法读取null的属性'0'” [关闭]

Question

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

[<5天前关闭。

似乎页面在分配数据之前就已加载，PS我是一个新手，因此，我很感谢提供解释的解决方案。我已经尝试检查所有内容，但是我什至不知道是否有一种方法可以保持页面加载，直到从API辅助取值为止。

data () {
    return {
      headline: null
      // headlineStories: null
    }
  },

fetchTopData () {
      this.$http.get(`https://newsapi.org/v2/top-headlines?country=us&category=health&apiKey=${API_KEY}`).then(response => {
        this.headline = response.data.articles
        console.log('this.headline')
      }).catch(err => {
        console.log(err)
      })
}

HTML

<div class="popular-card mt-5">
    <div class="row">
        <div class="col-md-4" v-for="(headlines, index) in headline.slice(1)" :key="index">
            <div class="card" style="width: 20rem;">
                <img style=" height:250px; width: 100%" v-bind:src='headlines.urlToImage' class="card-img-top"
                     alt="...">
                <div class="card-body">
                    <h5 class="card-title"> {{headlines.title}} </h5>
                    <p class="card-text"> {{headlines.content | shortenString}} </p>
                    <p class="mt-5"> {{headlines.author}} </p>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div>

似乎页面在分配数据之前就已加载，PS我是一个新手，因此，我很感谢提供解释的解决方案。我已经尝试检查所有内容，但我什至不知道是否有办法...

Answer 1

欢迎使用Vue！