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
런타임시 오류가 발생하므로 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] 삭제
몇 마디 만하겠습니다