我尝试开始将Typescript与VueJS结合使用，但是遇到TypeError问题。
在我的App.vue中，我有一个Gallery类数组作为类属性。
在创建的挂钩中，我调用一个Web服务来填充此数组。
填充后，当我记录它时，我有对象而不是画廊实例。而且，如果我尝试在Gallery实例上调用函数，它将失败。
我认为问题更多是TS问题，而不是Vue问题。
当我到处说我需要一个画廊阵列时，我不明白为什么我实际上有一个对象阵列。
如果有人有帮助我的想法，我不止于此。
谢谢阅读。我将您所有的代码粘贴到下面。
祝你今天愉快 ;)
迪米特里
App.vue
<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钩子(Hook)没有错误，因此可以将问题缩小到如何将gallery传递到组件。这是一个字符串值:
<CvGallery v-for="(gallery, i) in galleries" gallery="gallery" :key="i"></CvGallery>
相反，它应该被绑定(bind):
<CvGallery v-for="(gallery, i) in galleries" :gallery="gallery" :key="i"></CvGallery>
关于typescript - 当我在VueJS中使用Typescript时出现TypeError，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60239807/