[Vuejs]-VusJs: Error in render: "Type Error: Cannot read property 'data' of undefined"

by

0👍

✅

vue can’t resolve data when vnode created,you can modify your code like this:

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

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

or like this:

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

0👍

The reason why you’re getting the error Type Error: Cannot read property 'data' of undefined is because you’re trying to accessthis when the arrow notation function in the axios request changes the this reference. You’d actually want to do something like this instead:
import axios from ‘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))
  }
}

Leave a comment