Свойство x, жалующееся на машинописный текст, не существует для типа '{ data: () =>

Я получаю это сообщение об ошибке в моей консоли:

ОШИБКА в 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>

Сам код работает, как заставить ТС перестать плакать?

Пожалуйста, поделитесь кодом Dashboard.vue

Boussadjra Brahim 20.11.2022 21:06

Обновил вопрос с кодом.

Ananas Barabas 20.11.2022 23:16
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
0
2
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете 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

Другие вопросы по теме