我正在努力完成这项工作。我正在开发一个 VueJS 小应用程序，使用 ParcelJS 提供服务。
在名为 static List<String> getPages(String string) {
List<String> pages = new ArrayList<>();
Pattern ptr = Pattern.compile("([0-9]*?)(?:-)([0-9]*?)(?=[.]|$)");
Matcher match = ptr.matcher(string);
if (matcher.find()) {
pages.add(matcher.group(1));
pages.add(matcher.group(2));
}
return pages;
}
的视图中，我尝试使用网络获取的数据创建特定组件 DisplayProgram 的多个实例。
当我尝试显示组件时，出现此错误：ModuleListView
这是我正在使用的两个视图：
[Vue warn]: Failed to mount component: template or render function not defined.
DisplayProgram.vue<template lang="pug">
div.grix.xs4
div.col-xs4.row-xs5.row-md8.vself-stretch.vcenter
transition(:name="getSlideSide()" mode="out-in")
component(:is="getModuleListView()")
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import ModuleListView from './ModuleListView.vue';
@Component({
components: {
'module-list': ModuleListView
}
})
export default class DisplayProgram extends Vue {
@Prop() program: any;
activeModuleList!: {name: string, number: number, modules: Array<any>};
activeModuleListNumber: number = 0;
previousModuleListNumber: number = 0;
moduleLists : Array<{name: string, number: number, modules: Array<any>}> = [];
listViews: Array<ModuleListView> = [];
async created() {
this.moduleLists = this.getModuleLists(this.program);
this.activeModuleList = this.moduleLists[0];
this.emitModuleListChanged(this.activeModuleList.number);
this.instanciateListViews();
}
instanciateListViews() {
this.moduleLists.forEach(moduleList => {
let moduleListView: ModuleListView = new ModuleListView(moduleList);
Vue.set(this.$options.components, moduleList.number, moduleListView);
this.listViews.push(moduleListView);
});
}
getModuleListView() {
return this.listViews[this.activeModuleListNumber];
}
getSlideSide() {
if (this.previousModuleListNumber > this.activeModuleListNumber) {
return "slide-right";
}
return "slide-left";
}
getProgramProgress() : {actualNumber: number, totalNumber: number} {
return {actualNumber: this.activeModuleListNumber + 1 , totalNumber: this.moduleLists.length};
}
getModuleLists(program: any) : Array<{name: string, number: number, modules: Array<any>}> {
// Getting data and generating the javascript objects
return moduleLists;
}
displayModuleList(index: number) {
this.emitModuleListChanged(index);
}
emitModuleListChanged(moduleListNumber: number) {
this.previousModuleListNumber = this.activeModuleList.number;
this.activeModuleList = this.moduleLists[moduleListNumber];
this.$emit("module-list-changed", {moduleList : this.activeModuleList, total : this.moduleLists.length});
this.activeModuleListNumber = moduleListNumber;
}
}
</script>
<style scoped>
</style>
ModuleListView.vue你们有解决方案吗，伙计们？感谢您的帮助！