Question

我从API请求数据并且数据是成功的，但是我得到了这个错误

＆＃13;

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

＆＃13;

这里是值

{
"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

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

Answer 2

您收到错误Type Error: Cannot read property 'data' of undefined的原因是，当axios请求中的箭头符号功能更改this引用时，您尝试访问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))
  }
}

VusJs：渲染错误：＆＃34;类型错误：无法读取属性＆＃39;数据＆＃39;未定义＆＃34;

2 个答案: