Выборка данных с использованием Vue http на основе параметров маршрутизатора - PullRequest
Новая
       15

Выборка данных с использованием Vue http на основе параметров маршрутизатора

0 голосов
/ 20 ноября 2018

Я искал ответ на этот вопрос, а также следовал примеру в документации по маршрутизатору vue , но все еще возникают проблемы.Я пытаюсь выполнить http-вызов при начальной загрузке компонента, а затем также посмотреть параметры маршрутизатора и обновить вызов 'get' из vue-resource.

Мой компонент vue js выглядит следующим образом ... 

export default {
  name: 'city',
  components: {
    Entry
  },
  data () {
    return {
      city: null
    }
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData() {
      const cityName = this.$route.params.name;
      this.$http.get('http://localhost:3000/cities?short=' + cityName).then(function(response){
        this.city = response.data;
      }, function(error){
        alert(error.statusText);
      });
      console.log(cityName)
    }
  }
}

Я вышел из системы 'cityName' в моем методе fetchData, и он всегда возвращает правильное имя, но когда я добавляю это 'cityName' к вызову http get, он не возвращает правильные данные.При начальной загрузке this.city остается нулевым, а затем каждый раз, когда я обновляю маршрут, данные возвращаются с выбранным предыдущим городом вместо нового обновленного города в маршруте.Я пробовал created свойство Vue вместо mounted, и происходит то же самое.Есть идеи?

1 Ответ

0 голосов
/ 20 ноября 2018

Попробуйте изменить метод fetchData следующим образом: 

fetchData() {
  const cityName = this.$route.params.name;
  this.$http.get('http://localhost:3000/cities?short=' + cityName).then((response) => {
    this.city = response.data;
  }, (error) => {
    alert(error.statusText);
  });
  console.log(cityName)
}

Функция записи => сохраняет this в контексте компонента.

...