Почему запрос axios не работает внутри методов vuejs (nuxt.js) - PullRequest
Новая
       58

Почему запрос axios не работает внутри методов vuejs (nuxt.js)

0 голосов
/ 19 июня 2019

Я установил axios внутри моего приложения nuxt.js.Вот мой код файла конфигурации:

Файл: nuxt.config.js 

modules: [
  '@nuxtjs/vuetify',
  '@nuxtjs/axios',
],

axios: {
  // proxyHeaders: false
}

Вот мой пример рабочего кода: 

export default {
  data() {
    return {
      ip: ''
    }
  },
  async asyncData({ $axios }) {
    const ip = await $axios.$get('http://icanhazip.com')
    return { ip }
  }
}

Авот мой не работающий код: 

export default {
  data() {
    return {
      ip: ''
    }
  },
  methods: {
    async asyncData() {
      const ip = await this.$axios.$get('http://icanhazip.com')
      this.ip = ip
    }
  } 
}

Почему внутри methods запрос axios не работает?

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Вы не можете вызвать asyncData в вашем методе object. asyncData только для предварительного рендеринга.

Переименуйте вашу функцию во что-то другое, и все должно быть в порядке: 

export default {
  data() {
    return {
      ip: ''
    }
  },
  methods: {
    async getData() {
      const ip = await this.$axios.$get('http://icanhazip.com')
      this.ip = ip
    }
  } 
}

Также, когда вы используете asyncData, как в вашем верхнем примере, вы не должны инициализировать «ip» в вашей функции данных. То, что возвращается из asyncData, в любом случае объединяется с данными.

0 голосов
/ 25 июня 2019

Метод AsyncData будет вызываться каждый раз перед загрузкой страницы, также обратите внимание, что asyncdata доступна только в компоненте страницы в nuxt. У вас нет доступа к экземпляру компонента через this внутри asyncData, потому что он вызывается до запуска компонента. Вы можете использовать возвращенные данные из данных asyncData в своем шаблоне без инициализации в своих данных.

Nuxt asyncData

...