Vue.js data: undefined

Question

I am new to Vue.js.

Please advice me.
I get comments: undefined so comments are not displaying. xhr is normal with 200.

Thank you Thank you Thank you Thank you Thank you

<template>
 <div>
  <ul class="media-list">
     <li class="media" v-for="comment in comments">
         {{ $comment.body }}            
     </li>
  </ul> 
</div>
</template>


<script>
 export default {
    data () {
        return {
            comments: []
        }
    },
    props: {
        postid: null
    },
    methods: {
        getComments () {
            this.$http.get('/blog/' + this.postid + '/comments').then((response) => {
                this.comments = response.json().data;
            });
        }
    },
    mounted () {
        this.getComments();
    }
}

bind(this) is missing - this.$http.get('/blog/' + this.postid + '/comments').then((response) => { this.comments = response.json().data; }.bind(this)); — Frnak
– Frnak, Commented May 29, 2017 at 5:21

lucas · Accepted Answer · 2017-06-07 13:24:45Z

3

Basically there are two problems:

$comment don't exist
You have no data on response.json().data, that's why you get a undefined

I used a different API just to test it (as I don't have access to yours).

TEMPLATE

<div id="app">
  <ul class="media-list">
    <li class="media" v-for="comment in comments">
      {{ comment.familyName + ', ' + comment.givenName }}
    </li>
  </ul>
</div>

SCRIPT

new Vue({
    el: '#app',
  data () {
    return {
      comments: []
    }
  },
  props: {
    postid: null
  },
  methods: {
    getComments () {
      this.$http.get('//ergast.com/api/f1/drivers.json').then((response) => {
        this.comments = response.body.MRData.DriverTable.Drivers;
      });
    }
  },
  mounted () {
    this.getComments();
  }
});

Check out a working example here

answered Jun 7, 2017 at 13:24

lucas

1,1458 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LiangJinQing · Accepted Answer · 2017-05-29 14:03:31Z

0

this.comments = response.json().data;

console.log(this.comments) ;

to see what you get ; you define comments=Array ; maybe you get the response.json().data is not a Array;

answered May 29, 2017 at 14:03

LiangJinQing

91 bronze badge

Comments

Nilanjan Ganguly · Accepted Answer · 2017-11-03 13:20:50Z

Try using vm instead of this. In API response make sure what you are getting using console.log(). If response is already in json do not use response.json(). In HTML change $comment.body to comment.body. Make sure you have the body key in comments[] array.

<template>
<div>
  <ul class="media-list">
   <li class="media" v-for="comment in comments">
      {{ comment.body }}            
   </li>
  </ul> 
</div>
</template>

<script>
  export default {
    data () {
      return {
        comments: [],
        postid: null
      }
    },
    props: {

    },
    methods: {
      getComments () {
        let vm = this;
        vm.$http.get('/blog/' + vm.postid + 
            '/comments').then((response) => {

            console.log(response)
            vm.comments = response.data;
        });
      }
    },
    mounted () {
      let vm = this;
      vm.getComments();
    }
  }
}

Jorge Cardenas · Accepted Answer · 2021-08-18 14:44:03Z

0

:

My suggestion is to properly use try-catch statements.

I have found this is the safest and proper way to manage cases where variable could take undefined or null values, instead of trying to "if" everything.

try {
        val = localStorage.getItem('accesstoken')
      } catch (error) {
        alert(error)
      }

Take care!

answered Aug 18, 2021 at 14:44

Jorge Cardenas

591 silver badge2 bronze badges

Collectives™ on Stack Overflow

Vue.js data: undefined

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related