Vue - Cannot set property of undefined in response

Question

<template>
<div class="address">
  <h1>{{address}}</h1>
</div>
</template>

<script>

export default {
    data() {
        return {
            id: this.$route.params.id,
            address:''
    }
},
created(){
 this.$axios.post("http://localhost/flutter_api/action.php",{
   id: this.id,
   action: "fetchaddress"
 })
 .then(function(res) { 
    console.log(res.data.address); // This returns the address
    alert(res.data.address);
    this.address=res.data.address;
 })
 .catch(function(error){
    console.log(error)
 })
 }
 }
 </script>

It is throwing an error like this TypeError: Cannot set property 'address' of undefined`` at eval (Address.vue?b0a0:24)

Please help me

Raffobaffo · Accepted Answer · 2020-07-11 18:10:42Z

5

It's because you are not binding this in the callback of your http call. You could use an arrow function for example to solve it.

from

 .then(function(res) { 
    console.log(res.data.address); // This returns the address
    alert(res.data.address);
    this.address=res.data.address;
 })

to

 .then((res) => { 
    console.log(res.data.address); // This returns the address
    alert(res.data.address);
    this.address=res.data.address;
 })

answered Jul 11, 2020 at 18:10

Raffobaffo

2,90611 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Vue - Cannot set property of undefined in response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related