#typescript #vue.js #nuxt.js
#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. Получили ли мы какой-либо ответ на это?