Я получаю это сообщение об ошибке в моей консоли:
ОШИБКА в src/components/Dashboard.vue:20:32 TS2339: свойство fetchAllProducts не существует для типа '{ data: () => { products: Product []; }; смонтирован(): Обещание; методы: { fetchAllProducts(): Promise; }; }'.
18 | }),
19 | async mounted() {
> 20 | const res = await this.fetchAllProducts();
| ^^^^^^^^^^^^^^^^
21 | this.products = res;
22 | console.info(res)
23 | },
ОШИБКА в src/components/Dashboard.vue:21:14 TS2339: свойство «продукты» не существует для типа «{ данные: () => { продукты: продукт []; }; смонтирован(): Обещание; методы: { fetchAllProducts(): Promise; }; }'.
19 | async mounted() {
20 | const res = await this.fetchAllProducts();
> 21 | this.products = res;
| ^^^^^^^^
22 | console.info(res)
23 | },
24 | methods: {
Мой код:
<script lang = "ts">
import { Product } from '@/types/types';
import axios from 'axios'
export default {
data: () => ({
products: [] as Product[]
}),
async mounted() {
const res = await this.fetchAllProducts();
this.products = res;
console.info(res)
},
methods: {
async fetchAllProducts(){
try {
const res = await axios.get('https://fakestoreapi.com/products')
return res.data;
} catch (e) {
console.info(e)
}
}
}
}
</script>
Сам код работает, как заставить ТС перестать плакать?
обновил вопрос с кодом.
Если вы используете vue 2, вы должны создать свой компонент с помощью Vue.extend
helper:
<script lang = "ts">
import { Product } from '@/types/types';
import axios from 'axios'
import Vue from 'vue';
export default Vue.extend({
data: () => ({
products: [] as Product[]
}),
async mounted() {
const res = await this.fetchAllProducts();
this.products = res;
console.info(res)
},
methods: {
async fetchAllProducts(){
try {
const res = await axios.get('https://fakestoreapi.com/products')
return res.data;
} catch (e) {
console.info(e)
}
}
}
})
</script>
для использования Vue 3 defineComponent
Пожалуйста, поделитесь кодом
Dashboard.vue