Javascript &引用；TypeError:无法读取属性'；长度'；“无效”的定义；在--->&书信电报；博客页面>；在src/views/blogPage/blogPage.vue

我正在尝试Vue，任何详尽的解释都将受到欢迎。我试图在单击后显示来自新闻API的信息，但我一直得到null错误

这是模板代码：

<div class="popular-card my-4" v-if="popular.length" ref="displayPopular">
              <div class="row">
                <div class="col-md-4 d-flex mt-4" v-for="populars in popular" :key="populars.id">
                    <div class="card" style="width: 100%; height: 38em">
                      <img style=" height:250px; width: 100%" :src='populars.urlToImage' class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title"> {{populars.title}}</h5>
                        <p class="card-text"> {{populars.content | shortenString}} </p>
                        <p class="mt-5"> {{populars.author}} </p>
                        <p class=" d-flex align-self-end"> {{populars.publishedAt | dateConvert}}, 3min read</p>
                      </div>
                    </div>
                </div>
              </div>
            </div>
            <div class="d-flex">
              <div class="ml-auto mt-4"><h6  class="popular-article" @click="getAllarticlesOnThisCategory" ref="popularArticle">SEE ALL POPULAR ARTICLE</h6></div>
            </div>

---

在将

popular

设置为空数组的位置张贴代码。在访问

v-if

data（）{return{headline:[]，counter:0，popular:[]，popularDisplay:false，spin:false//headlineStories:null}中的length属性之前，可以检查null

我试过写

v-if=“popular.length&！null”

但仍然不能工作我的意思是：

v-if=“popular！==null&&pouplar.length”

在null中，问题可能在于

data.articles.slice（5）

Post您将

popular

设置为空数组的代码。您可以在访问

v-if

data（）{return{headline:[]，counter:0，popular:[]，popularDisplay:false，spin:false//headlineStories:null}中的length属性之前检查null

我试着写了

v-if=“popular.length&&！null”

但仍然没有起作用，我的意思是：

v-if=“popular！==null&&pouplar.length”

既然

popular

是空的，问题可能在于

data.articles.slice（5）

getAllarticlesOnThisCategory () {
      console.log('hey')
      // this.spin = true
      this.$http.get(`https://newsapi.org/v2/top-headlines?country=gb&apiKey=3d65f891e67841f3b2ca700bb*****`)
        .then(response => {
          return response.json()
        })
        .then(data => {
          this.popular = data.articles.slice(5)
          console.log(this.popular[2].description)
        })
      if (!this.popularDisplay) {
        this.popularDisplay = true
        this.$refs.popularArticle.innerText = 'SEE LESS ARTICLE'
      } else {
        this.popularDisplay = false
        this.$refs.popularArticle.innerText = 'SEE POPULAR ARTICLE'
      }
      this.spin = false
    }