CODEWITHSUNDEEP
javascriptvue.js
Phorce
Phorce

Reputation: 4642

Vue - Cannot set property of undefined in promise

So I have the following Vue file:

<template>

  <li class="notifications new">
      <a href="" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <sup>
          <span class="counter">0</span>
          </sup>
       </a>
       <div class="dropdown-menu notifications-dropdown-menu animated flipInX">
            <ul v-for="notification in notifications" @click="" class="notifications-container">
              <li>
                <div class="img-col">
                  <div class="img" style="background-image: url('assets/faces/3.jpg')"></div>
                </div>
              </li>
            </ul>
        </div>
  </li>

</template>

<script>
export default {

    data: function() {
        return {
          notifications: [],
          message: "",
        }
    },

    methods: {

        loadData: function() {
            Vue.http.get('/notifications').then(function(response) {

                console.log(response.data);
                //this.notifications = response.data;
                //this.notifications.push(response.data);

                this.message = "This is a message";

                console.log(this.message);
            });

        },
    },

    mounted() {
        this.loadData();
    },

}

</script>

This is compiling just fine, however, when loading up the web page, I get the following error:

app.js:1769 Uncaught (in promise) TypeError: Cannot set property 'message' of undefined

I have tried to create another method as well, but had no joy. I literally cannot seem to work out why this wouldn't be accessible here.

Upvotes: 21

Views: 59411

Answers (8)

Saptarshi Dey
Saptarshi Dey

Reputation: 195

mounted(){
let self = this;
    axios
     .get('API')
     .then(function(resonse){
       console.log(resonse.data.blogs);
       self.blogs = resonse.data.blogs; //Replace this with self
   });
},

Upvotes: 0

Jo&#227;o Pedro Pereira Lima
Jo&#227;o Pedro Pereira Lima

Reputation: 11

I got results with this structure. I was using axios however I think it will work for your case too.

data(){
 return {
  message = [],
 }
}
methods: {

    loadData() {
        Vue.http.get('/notifications')
        .then(({ data }) => (this.message = data));

        //console.log(this.message);
    },
},

mounted() {
    this.loadData();
},

Upvotes: 1

Suman Maity
Suman Maity

Reputation: 79

We need to define method by using shorthand property. For example

export default {
  name: "Posts",
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    async fetchPosts() {
      this.posts = await fetch("http://jsonplaceholder.typicode.com/posts")
          .then(x => x.json())
          .catch(e => console.error(e));
    }
  },
  created() {
    this.fetchPosts();
  }
}

Upvotes: 0

sese smith
sese smith

Reputation: 353

One can set this to a const outside the code block and use that const value to access the class properties.

ie

const self = this;

blockMethod(function(data) {
    self.prop = data.val();
})

Upvotes: 7

Cong Nguyen
Cong Nguyen

Reputation: 3445

Use arrow function in promise then you can access 'this' object.

loadData: function() {
        Vue.http.get('/notifications').then(response => {
            console.log(response.data);
            //this.message = 'Something'
        });

    }

Upvotes: 3

Pablo Fernandez
Pablo Fernandez

Reputation: 143

created() {
pipedrive.getAllDeals()
.then(response => {
  // JSON responses are automatically parsed.
  this.posts = response.data
})
.catch(e => {
  this.errors.push(e)
})

// async / await version (created() becomes async created())
//
// try {
//   const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
//   this.posts = response.data
// } catch (e) {
//   this.errors.push(e)
// }

}

Upvotes: 0

Andy Brown
Andy Brown

Reputation: 5522

There's another common reason which I keep bumping into why you'll get this error message. If you use v-if rather than v-show to hide an item, it won't be in the DOM, won't load initially and won't be available to reference. I just spent a while working out why this gave the error message above:

vm.$refs.refpersonview.Person = ...

The reason is that I'd conditionally hidden the component in a v-if block. Use v-show instead!

Upvotes: 1

FitzFish
FitzFish

Reputation: 8629

Your context is changing: because you are using the keyword function, this is inside its scope the anonymous function, not the vue instance.

Use arrow function instead.

  loadData: function() {
        Vue.http.get('/notifications').then((response) => {

            console.log(response.data);
            //this.notifications = response.data;
            //this.notifications.push(response.data);

            this.message = "This is a message";

            console.log(this.message);
        });

    },

NB: You should by the way continue to use the keyword function for the top level of your methods (as shown in the example), because otherwise Vue can't bind the vue instance to this.

Upvotes: 85

Related Questions