vue обновление данных при создании () - PullRequest
Новая
       23

vue обновление данных при создании ()

0 голосов
/ 27 апреля 2020

Я пытаюсь обновить массив из моих данных вида () внутри созданного хука (), но моя консоль говорит, что allFi sh не определено. Я пока не очень хорошо разбираюсь в vue, и я надеялся, что кто-нибудь может сообщить мне, если это проблема со словарем или есть лучший способ обновить мои данные при создании () при получении данных из запроса на получение. а затем добавить его в массив внутри моих данных.

моего текущего приложения. vue

export default {
  name: "App",
  components: {
    WebMap
  },
  data: () => ({
    coords: {
      latitude: -118,
      longitude: 34,
    },

    date: '',
    fishType: '',
    allFish: []

  }),

  created(){
    this.allFish = this.fetchFishLocations()
  },

  methods: {

    fetchFishLocations(){

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

    },


    async updateCenter() {
      console.log(this.allFish)   //check to see if allFish is defined
      await this.getLocation();
      this.addFishToDb()
    },

  },
};

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Функция, которая называется fetchFishLocations, просто возвращает undefined. Тебе лучше узнать об использовании обещания. Кстати, проще использовать функцию стрелки 

// 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')
    }
}
0 голосов
/ 27 апреля 2020

Вам нужно заполнить все Fi sh в топоре ios -> затем метод. 

...
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);
            })

    },
}
...
...