VusJs: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство« данные »из неопределенного»

Question

введите описание изображения здесь

Я запрашиваю данные из API, и данные были успешно, но я получаю эту ошибку

<template>
  <!-- <h1>{{ hasil }}</h1> -->
  <div>
    <div v-for=" h in hasil.data.data " :key="h.id">
      <div class="card blue-grey darken-1 left-align">
        <div class="card-content white-text">
          <span class="card-title">Title: {{ h.title }} | ID: {{ h.id }}</span>
          <p>Body: {{ h.body }}</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
 name: 'ListArticle',
 data () {
   return {
     hasil: []
   }
 },

 created () {
   axios.get('http://xxx.xxxxx.com/api/laravel')
   .then(response => (this.hasil = response))
 }
}
</script>

здесь значение

{
"current_page": 1,
"data": [
    {
        "id": 10,
        "user_id": 1,
        "category_posts_id": 1,
        "title": "jjjjj kkkkk",
        "body": "jjjjj  kkkkkkkkkkkkkkk",
        "slug": "jjjjj-kkkkk",
        "active": 1,
        "file_name": "phpheEduN.PNG",
        "original_file_name": "Capture.PNG",
        "file_path": "storage/app/public",
        "created_at": "2018-05-01 13:00:13",
        "updated_at": "2018-05-01 13:00:13",
        "url": "xxx"
    },
    {
        "id": 9,
        "user_id": 1,
        "category_posts_id": 1,
        "title": "asaaaaaaa jhabsd",
        "body": "aaa kjjkj",
        "slug": "xxx",
        "active": 1,
        "file_name": "phpcUz7qV.PNG",
        "original_file_name": "Capture.PNG",
        "file_path": "storage/app/public",
        "created_at": "2018-05-01 12:38:46",
        "updated_at": "2018-05-01 12:38:46",
        "url": ""
    },
    {
        "id": 8,
        "user_id": 1,
        "category_posts_id": 1,
        "title": "hkbakjbcscsdcsd",
        "body": "alsdjnblsjdccsdsfsdfdsffsfs",
        "slug": "hkbakjbcscsdcsd",
        "active": 1,
        "file_name": "php1LDUPr.PNG",
        "original_file_name": "Capture.PNG",
        "file_path": "storage/app/public",
        "created_at": "2018-05-01 12:33:46",
        "updated_at": "2018-05-01 12:33:46",
        "url": ""
    },
    {
        "id": 1,
        "user_id": 1,
        "category_posts_id": 1,
        "title": "test title",
        "body": "test body",
        "slug": "test-title",
        "active": 1,
        "file_name": "",
        "original_file_name": "",
        "file_path": "",
        "created_at": null,
        "updated_at": null,
        "url": ""
    }
],
"first_page_url": "xxx",
"from": 1,
"last_page": 1,
"last_page_url": "xxx",
"next_page_url": null,
"path": "xxx",
"per_page": 5,
"prev_page_url": null,
"to": 4,
"total": 4
}

Answer 1

Причина, по которой вы получаете ошибку Type Error: Cannot read property 'data' of undefined, заключается в том, что вы пытаетесь получить доступ к this, когда функция обозначения стрелки в запросе axios изменяет ссылку this. Вы бы на самом деле хотели сделать что-то вроде этого: импорт axios из 'axios'

export default {
  name: 'ListArticle',
  data () {
    return {
      hasil: []
    }
  },

  created () {
    // Create reference to this so you can access the Vue
    // reference inside arrow notation functions
    var self = this;

    axios.get('http://xxx.xxxxx.com/api/laravel')
    .then(response => (self.hasil = response))
  }
}

Answer 2

vue не может разрешить данные при создании vnode, вы можете изменить свой код следующим образом:

export default {
 name: 'ListArticle',
 data () {
   return {
     hasil: {data:{data:[]}}
   }
 },

 created () {
   axios.get('http://xxx.xxxxx.com/api/laravel')
   .then(response => (this.hasil = response))
 }
}

или как это:

<template>
  <!-- <h1>{{ hasil }}</h1> -->
  <div>
    <div v-for=" h in hasil.data " :key="h.id">
      <div class="card blue-grey darken-1 left-align">
        <div class="card-content white-text">
          <span class="card-title">Title: {{ h.title }} | ID: {{ h.id }}</span>
          <p>Body: {{ h.body }}</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div> 
    </div>
  </div>
</template>

export default {
 name: 'ListArticle',
 data () {
   return {
     hasil: {data:[]}
   }
 },

 created () {
   axios.get('http://xxx.xxxxx.com/api/laravel')
   .then(response => (this.hasil = response.data))
 }
}