«Ошибка типа: невозможно прочитать свойство« длина »с нулем», найденное в ---> <Blogpage>в src / views / blogPage / blogpage. vue - PullRequest
Новая
       28

«Ошибка типа: невозможно прочитать свойство« длина »с нулем», найденное в ---> <Blogpage>в src / views / blogPage / blogpage. vue

1 голос
/ 14 января 2020

Я пробую свои силы на Vue, и любое исчерпывающее объяснение будет приветствоваться. Я пытаюсь отобразить информацию, поступающую из News 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>

, это метод:

и в моем объекте данных популярный установлен в пустой массив: [] 

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
    }
...