[Vuejs]-Vue updating data on create()

by

1👍

✅

The function which is called fetchFishLocations just returns undefined.
You’d better learn about the use of promise.
By the way, it’s easier to use the arrow function

// solution 1
created(){
    this.fetchFishLocations()
},
methods: {
    fetchFishLocations(){
         const that = this
         axios.get('http://localhost:3000/allFish')
            .then(function (response) {
              // handle success
              console.log(response.data.fish);
              that.allFish = response.data.fish
            })
            .catch(function (error) {
              // handle error
              console.log(error);
            })
    }
}

// solution 2
created(){
    const that = this
    this.fetchFishLocations()
        .then(function (response) {
              // handle success
              console.log(response.data.fish);
              that.allFish = response.data.fish
            })
        .catch(function (error) {
              // handle error
              console.log(error);
            })
},
methods: {
    fetchFishLocations(){
         return axios.get('http://localhost:3000/allFish')
    }
}

-1👍

You need fill allFish in axios->then method.

...
created() {
  this.fetchFishLocations();
},
methods: {
    fetchFishLocations(){

         axios.get('http://localhost:3000/allFish')
            .then(function (response) {
              // handle success
              console.log(response.data.fish);
              this.allFish = response.data.fish;
            })
            .catch(function (error) {
              // handle error
              console.log(error);
            })

    },
}
...

Leave a comment