Асинхронные данные и выборка не задают данные

#typescript #vue.js #nuxt.js

Вопрос:

Я использую nuxt v2.14.1 с typescript и nuxt-property-decorator пакетом. Я сталкиваюсь с множеством проблем.

Я не могу установить данные из fetch () или asyncData.

 console.log(this.fruits) // => undefined
console.log(response.data);//  => [{},..}
this.fruits = response.data; // => this does not set fruits

Инструменты разработки Vue также отображают fruits в виде пустого массива.

Кто-нибудь может помочь мне понять, что происходит и как это решить?

Вот код, использующий fetch:

 @Component({
  layout: 'AppLayout',
  async fetch({ query, store }: Context) {
    const self = this;
    const model = new Car();
    model.setFilters(query);
    const response = await model.$api.$get('/new/cars').catch(() => {
      store.$showError('Unable to fetch cars');
    });
    if (response) {
      // @ts-ignore
      self.cars = Car.collect(response.data as Partial<Car>[]);
    }
  },
})
export default class index extends Vue {
  cars: Car[] = [];
}

Приведенный выше код работает, если я просто переименую fetch в mounted .

Кроме того, при использовании asyncData код, похоже, работает, и я вижу свой список автомобилей, а затем, когда загрузка страницы завершается, страница автоматически становится пустой, хотя я вижу автомобили, перечисленные в Vue dev tools.

Обновление: Похоже, что не используется контекст nuxt в параметре fetch.Хотя понятия не имею, почему.

1. Вы опубликовали недостаточно, чтобы сказать, но ваша проблема почти наверняка в том, что вы пытаетесь получить доступ к данным до того, как они фактически установлены. Не забывайте, что объекты, зарегистрированные в консоли, представляют собой просмотр объекта в реальном времени , а не моментальный снимок объекта во время его регистрации. Это может создать у вас ложное представление о том, что происходит, когда.

2. К asyncData у вас не будет доступа this , однако вы можете получить к нему доступ в fetch. Не могли бы вы, пожалуйста, добавить больше кода / сведений об ошибках!!!

3. @HardikShah Спасибо за ваше время. Обновлен код.

4. То же самое здесь, я не могу решить это. консоль. журнал в порядке, но данные не отображаются в режиме просмотра.

Ответ №1:

Вы пробовали просто возвращать объект?

   async fetch({ query, store }: Context) {
    const model = new Car();
    model.setFilters(query);
    const response = await model.$api.$get('/new/cars').catch(() => {
      store.$showError('Unable to fetch cars');
    });
    if (response) {
      return {
         cars: Car.collect(response.data as Partial<Car>[])
      }
    }
  },

Просто вернув его, он должен объединить ваш возвращаемый объект с вашим объектом данных.

Они написали это также в документах:https://nuxtjs.org/api /

Результат из asyncData будет объединен с данными.

Обратите внимание: Поскольку asyncData() это происходит на стороне сервера, у него нет доступа к экземпляру vue с this

Предупреждение: У вас нет доступа к экземпляру компонента через this внутри asyncData, потому что он вызывается перед запуском компонента.

1. Работает ли это в fetch? Я постараюсь дать вам знать.

2. Нет, возврат объекта из fetch у меня не сработал.

3. @priosshrsth и asyncdata?

4. возвращаемый объект из asyncData устанавливает cars, и я вижу это в vue dev tools, но шаблон не отображается. На самом деле, это появляется на секунду, и я вижу свои списки автомобилей с изображением, а затем оно исчезает, и страница становится пустой.

5. Получили ли мы какой-либо ответ на это?