Vue - Невозможно установить свойство undefined в ответе

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>

Это вызывает ошибку, подобную этой TypeError: Невозможно установить свойство 'address' of undefined '' в eval (Address. vue? B0a0: 24)

Пожалуйста, помогите мне

Answer 1

Это потому, что вы не связываете this в обратном вызове вашего http-вызова. Например, для его решения можно использовать стрелочную функцию.

от

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

до

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