VueJS에서 Typescript를 사용할 때 TypeError

디미트리 스타 인 부쉬

VueJS에서 typescript를 사용하려고 시도했지만 TypeError 문제가 발생했습니다.

내 App.vue에는 갤러리 클래스 배열이 클래스 속성으로 있습니다. 생성 된 후크에서이 배열을 채우기 위해 웹 서비스를 호출합니다. 일단 채울 때 기록하면 갤러리 인스턴스가 아닌 개체가 있습니다. 그리고 Gallery 인스턴스에서 함수를 호출하려고하면 실패합니다. 문제는 Vue 문제보다 TS 문제라고 생각합니다.

내가 갤러리 배열이 필요한 모든 곳에 말할 때 실제로 Object 배열이있는 이유를 이해할 수 없습니다.

누군가 나를 도울 아이디어가 있다면 나는 더 이상 삽니다.

읽어 주셔서 감사합니다. 아래에 모든 코드를 붙여 넣습니다.

좋은 하루 되세요;)

디미트리

앱보기

<template>
    <div>
        <CvGallery v-for="(gallery, i) in galleries" gallery="gallery" :key="i"></CvGallery>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import CvGallery from "@/components/CvGallery.vue";
    import Gallery from "@/models/Gallery";
    import axios from "@/axios/axios-creatiview"

    @Component({
        components: {
            CvGallery
        },
    })
    export default class App extends Vue {
        private galleries: Gallery[] = [];

        created() {
            axios.get('').then(response => {
                console.log(response.data);
                response.data.forEach((galleryJson: {id: number; name: string; description: string}) => {
                    const gallery = new Gallery(galleryJson.id, galleryJson.name, galleryJson.description);
                    this.galleries.push(gallery);
                    console.log(typeof gallery);
                });
            });
        }
    }
</script>

<style>
</style>

Gallery.ts

export default class Gallery{
    private readonly id: number;
    private readonly name: string;
    private readonly description: string;

    constructor(id: number, name: string, description: string) {
        this.id = id;
        this.name = name;
        this.description = description;
    }

    getId(){
        return this.id;
    }

    getName(){
        return this.name;
    }

    getDescription(){
        return this.description;
    }
}

CvGallery.vue

<template>
    <div class="gallery">
        <p>Gallery</p>
        <p>{{ gallery.getDescription() }}</p>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator'
    import Gallery from "@/models/Gallery";
    @Component
    export default class CvGallery extends Vue{
        @Prop() private gallery!: Gallery;
    }
</script>

<style scoped>
    .gallery{
        background-color: #222222;
        color: #DDDDDD;
    }
</style>

로그

16:16:42,658 [HMR] Waiting for update signal from WDS... log.js:24
16:16:42,771
(3) […]
​
0: Object { id: 1, name: "DisneyWorld", description: "First trip to DisneyWorld Florida!" }
​
1: Object { id: 2, name: "Europapark", description: "The best German park" }
​
2: Object { id: 3, name: "Disneyland Paris", description: "A lot of walkthrough attractions" }
​
length: 3
​
<prototype>: Array []
App.vue:23
16:16:42,772 object 3 App.vue:27
16:16:42,774 [Vue warn]: Error in render: "TypeError: _vm.gallery.getDescription is not a function"

found in

---> <CvGallery> at src/components/CvGallery.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619
16:16:42,774 TypeError: "_vm.gallery.getDescription is not a function"
    render CvGallery.vue:7
    VueJS 20
vue.runtime.esm.js:1888
16:16:42,775 [Vue warn]: Error in render: "TypeError: _vm.gallery.getDescription is not a function"

found in

---> <CvGallery> at src/components/CvGallery.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619
16:16:42,775 TypeError: "_vm.gallery.getDescription is not a function"
    render CvGallery.vue:7
    VueJS 20
vue.runtime.esm.js:1888
16:16:42,776 [Vue warn]: Error in render: "TypeError: _vm.gallery.getDescription is not a function"

found in

---> <CvGallery> at src/components/CvGallery.vue
       <App> at src/App.vue
         <Root> vue.runtime.esm.js:619
16:16:42,776 TypeError: "_vm.gallery.getDescription is not a function"
    render CvGallery.vue:7
    VueJS 20
vue.runtime.esm.js:1888

Flask 일 것입니다.

런타임시 오류가 발생하므로 TypeScript 문제가 아니며 JavaScript에서도 동일합니다.

vm.gallery.getDescription is not a function오류 gallery는 정의되어 있음을 의미하고 그렇지 않으면 Cannot read property 'getDescription' of undefined. 또한 gallery의 인스턴스가 아님을 의미합니다 . Gallery그렇지 않으면 getDescription메서드 가 있습니다 .

created후크에 오류가 없기 때문에 gallery구성 요소로 전달되는 방법으로 문제를 좁힐 수 있습니다 . 문자열 값입니다.

<CvGallery v-for="(gallery, i) in galleries" gallery="gallery" :key="i"></CvGallery>

대신 바인딩되어야합니다.

<CvGallery v-for="(gallery, i) in galleries" :gallery="gallery" :key="i"></CvGallery>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

MobX에서`useLocalObservable`을 사용하여 TypeScript로 작업 할 때 TypeError?

분류에서Dev

유사 쿼리를 사용할 때 TypeError

분류에서Dev

플롯에 날짜 시간 객체를 사용할 때 TypeError

분류에서Dev

Pyalgotrade를 사용할 때 Python의 TypeError

분류에서Dev

pdfMake pdf 엔진에서 사용자 정의 이미지를 사용할 때 "Uncaught TypeError : Cannot read property 'embed'of undefined"발생

분류에서Dev

openpyxl을 사용하여 통합 문서를 열려고 할 때 TypeError

분류에서Dev

TypeError, 사전에서 변수를 계산할 때

분류에서Dev

sklearn에서 교차 유효성 검사를 시도 할 때 TypeError

분류에서Dev

TypeError : EarlyStopping keras에서 restore_best_weights = True를 사용할 때 'NoneType'유형의 개체에 len ()이 없습니다.

분류에서Dev

TypeError : react-router에서 useParams를 사용할 때 undefined 속성 'match'를 읽을 수 없습니다.

분류에서Dev

sympy 및 mpmath는 solveset () 내에서 erf () 함수를 사용할 때 "TypeError : cannot create mpf"를 제공합니다.

분류에서Dev

ChangeNotifier에서 notifyListeners를 사용할 때?

분류에서Dev

Python에서 except를 사용할 때 SyntaxError

분류에서Dev

Android에서 RecyclerView를 사용할 때 NPE

분류에서Dev

Android에서 CheckBox를 사용할 때 NullPointerException

분류에서Dev

Promise에서 .finally ()를 사용할 때 TypeScript 오류를 만드는 방법

분류에서Dev

Tkinter를 사용하여 함수를 호출 할 때 TypeError

분류에서Dev

TypeScript에서 선언 및 내보내기 키워드를 사용할 때?

분류에서Dev

Stack Navigator를 사용할 때 "TypeError : (0, _reactNavigationStack.default) is not a function"

분류에서Dev

gulp를 사용할 때 'TypeError : args.cb is not a function'오류 발생

분류에서Dev

jQuery UI를 사용하려고 할 때 "TypeError : 'undefined'is not a function"발생

분류에서Dev

JS : putImageData를 사용하려고 할 때 "Uncaught TypeError : Type error"발생

분류에서Dev

numba를 사용하여 numpy 배열을 인덱싱 할 때 TypeError

분류에서Dev

IIFE를 사용하려고 할 때 잡히지 않은 TypeError

분류에서Dev

Keras load_model은 모델에서 사용자 정의 레이어를 사용할 때 'TypeError : Keyword argument not understand :'를 발생시킵니다.

분류에서Dev

write ()를 사용하여 텍스트 파일에 쓸 때 TypeError

분류에서Dev

TypeError : SMOTE를 사용할 때 __init __ ()에 예기치 않은 키워드 인수 '비율'이 있습니다.

분류에서Dev

TypeError : CustomUser를 사용할 때 User ()에 예기치 않은 키워드 인수 'is_staff'가 있습니다.

분류에서Dev

TypeError : Object {...}에 'find'메소드가 없습니다-Express와 함께 몽구스를 사용할 때

Related 관련 기사

  1. 1

    MobX에서`useLocalObservable`을 사용하여 TypeScript로 작업 할 때 TypeError?

  2. 2

    유사 쿼리를 사용할 때 TypeError

  3. 3

    플롯에 날짜 시간 객체를 사용할 때 TypeError

  4. 4

    Pyalgotrade를 사용할 때 Python의 TypeError

  5. 5

    pdfMake pdf 엔진에서 사용자 정의 이미지를 사용할 때 "Uncaught TypeError : Cannot read property 'embed'of undefined"발생

  6. 6

    openpyxl을 사용하여 통합 문서를 열려고 할 때 TypeError

  7. 7

    TypeError, 사전에서 변수를 계산할 때

  8. 8

    sklearn에서 교차 유효성 검사를 시도 할 때 TypeError

  9. 9

    TypeError : EarlyStopping keras에서 restore_best_weights = True를 사용할 때 'NoneType'유형의 개체에 len ()이 없습니다.

  10. 10

    TypeError : react-router에서 useParams를 사용할 때 undefined 속성 'match'를 읽을 수 없습니다.

  11. 11

    sympy 및 mpmath는 solveset () 내에서 erf () 함수를 사용할 때 "TypeError : cannot create mpf"를 제공합니다.

  12. 12

    ChangeNotifier에서 notifyListeners를 사용할 때?

  13. 13

    Python에서 except를 사용할 때 SyntaxError

  14. 14

    Android에서 RecyclerView를 사용할 때 NPE

  15. 15

    Android에서 CheckBox를 사용할 때 NullPointerException

  16. 16

    Promise에서 .finally ()를 사용할 때 TypeScript 오류를 만드는 방법

  17. 17

    Tkinter를 사용하여 함수를 호출 할 때 TypeError

  18. 18

    TypeScript에서 선언 및 내보내기 키워드를 사용할 때?

  19. 19

    Stack Navigator를 사용할 때 "TypeError : (0, _reactNavigationStack.default) is not a function"

  20. 20

    gulp를 사용할 때 'TypeError : args.cb is not a function'오류 발생

  21. 21

    jQuery UI를 사용하려고 할 때 "TypeError : 'undefined'is not a function"발생

  22. 22

    JS : putImageData를 사용하려고 할 때 "Uncaught TypeError : Type error"발생

  23. 23

    numba를 사용하여 numpy 배열을 인덱싱 할 때 TypeError

  24. 24

    IIFE를 사용하려고 할 때 잡히지 않은 TypeError

  25. 25

    Keras load_model은 모델에서 사용자 정의 레이어를 사용할 때 'TypeError : Keyword argument not understand :'를 발생시킵니다.

  26. 26

    write ()를 사용하여 텍스트 파일에 쓸 때 TypeError

  27. 27

    TypeError : SMOTE를 사용할 때 __init __ ()에 예기치 않은 키워드 인수 '비율'이 있습니다.

  28. 28

    TypeError : CustomUser를 사용할 때 User ()에 예기치 않은 키워드 인수 'is_staff'가 있습니다.

  29. 29

    TypeError : Object {...}에 'find'메소드가 없습니다-Express와 함께 몽구스를 사용할 때

뜨겁다태그

보관