我在控制台中收到以下错误:
Uncaught TypeError: Cannot set property 'render' of undefined
at normalizeComponent (componentNormalizer.js?2877:24)...
该错误确实允许渲染我的 View ,并且是由 created
Hook 上的 async/await
引起的。这很奇怪,因为我在应用程序的很多地方都使用了它(主要是在创建时调用 api 时)。
下面是完整的组件,我唯一能想到的是这个组件与html是分开的。
<template src="./QuestionnairesList.html"></template>
<script>
import Header from "../../Global/Header";
import { questionnairesService } from "../../../services/questionnairesService";
import { diseasesService } from '../../../services/diseasesService';
export default {
name: "QuestionnairesList",
components: {
Header
},
async created() {
this.loading = true
this.questionnairesFilter = await this.$store.getters.questionnairesFilter;
this.$store.dispatch("searchQuestionnaires");
// this.loading = false
},
data() {
return {
loading: null,
questionnairesFilter: {},
};
},
computed: {
questionnaires() {
this.loading = true
const diseasesMap = this.$store.getters.diseasesMap;
let ques = this.$store.getters.questionnaires.questionnaires || [];
ques.forEach(preScreener => {
let dxKey = diseasesService.getDiseaseKey(preScreener.disease);
if (diseasesMap[dxKey]) {
preScreener.disease_name = diseasesMap[dxKey].disease_name ;
preScreener.sub_disease_name = diseasesMap[dxKey].sub_disease_name;
}
});
this.loading = false
return ques;
},
total() {
return this.$store.getters.questionnaires.total;
},
pages() {
return Math.ceil(
this.$store.getters.questionnaires.total /
this.questionnairesFilter.page_size
);
},
IsLoading(){
return this.loading
}
},
methods: {
onQueryKeyUp() {
if (
this.questionnairesFilter.query == "" ||
this.questionnairesFilter.query.length > 1
) {
this.questionnairesFilter.page = 1;
}
this.loading = true;
this.$store.dispatch("searchQuestionnaires").then(() => {
this.loading = false;
});
},
onPageChange: function(pageNo) {
this.loading = true
this.questionnairesFilter.page = pageNo;
this.$store.dispatch("searchQuestionnaires");
this.loading = false
},
onNewQuestionnaire: function() {
this.$store.dispatch(
"setQuestionnaire",
questionnairesService.getEmptyQuestionnaire()
);
this.$router.push({ name: "AddQuestionnaire" });
},
onQuestionnaireSelected: function(qu) {
this.$router.push({ name: "EditQuestionnaire", params: { id: qu.id } });
}
}
};
</script>
最佳答案
我的代码也遇到了这个问题,这是一个非常令人恼火的错误,因为它不给你任何线索,无论问题出在哪里!
我通过添加导入的函数(在您的例子中是“questionnairesService”和“diseasesService”函数)来修复它,并将它们作为方法添加到我的 Vue 组件中:
methods: {
questionnairesService,
diseasesService
onQueryKeyUp() {
...
现在在任何地方调用导入的函数,都可以调用组件方法。所以当前行如下:
let dxKey = diseasesService.(....)
然后变成
let dxKey = this.diseasesService.(...)
如果您正在监视模式下处理代码(就像我一样),那么您必须停止并重新启动/重建本地应用程序才能使其正常工作(否则即使在修改代码之后,渲染错误仍将存在) 。 这对我来说就像一种魅力,所以也许它也对你有用。
关于javascript - Vue组件抛出错误: Cannot set property 'render' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56270565/