Nuxt. js не может получить данные из Django Rest Framework API

Question

Я работаю над интерфейсом Nuxt.js / Vue для моего Django Rest Framework. Похоже, я не могу успешно загрузить данные из своего API, хотя я указал разрешения, позволяющие пользователям, не прошедшим проверку подлинности, только чтение.

Индекс. vue

import axios from 'axios'
export default {
  async asyncData({ $axios, params }) {
    try {
      let customers = await $axios.$get(`/customer/`);
      return { customers };
    } catch (e) {
      return { customers: [] };
    }
  },
  head() {
    return {
      title: "Customer list"
    };
  },
  components: {
  },
  data() {
    return {
      headers: [
        {text: 'Name', value: 'name',},
        {text: 'Address', value: 'address',},
        {text: 'City', value: 'city',},
        {text: 'Phone', value: 'phone_one',},
        {text: 'Email', value: 'email',},
      ],
      customers: [],
    };
  },
  methods: {
    deleteCustomer(customer_id) {
      console.log(deleted `${customer.id}`) 
    }
  }
};
</script>

Nuxt.config. js

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: "http://localhost:8000/api"
  },
}

Я убедился, что API работает правильно, но массив клиентов в Vue всегда пуст. API находится по адресу http://localhost: 8000 / api / customer для получения списка клиентов.

Answer 1

Проблема была в трех местах. В обоих случаях синтаксические ошибки.

Первый return { customers}; должен быть return { customers: data };

Второй Удалить объявление клиентов: [] из Функция data (). Я полагаю, в этом нет необходимости, потому что asyncData перезаписывает данные в любом случае, но да. Это работает.

Третий Изменить let customers = await $axios.$get( / клиент / ); на const data = await $axios.$get(http://localhost: 8000 / API / клиент / );

Не обязательно использовать полный URL, но я хотел быть уверен.

Answer 2

у вас нет доступа к $axios в вашей функции asyncData как context .

, просто вы должны использовать ax ios, как показано ниже:

await axios.get(`/customer/`);

с другой стороны, чтобы использовать $axios.$get(), он должен быть внедрен в качестве глобального контекста.