首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue组件引发错误:无法设置未定义的属性“”render“”

Vue组件引发错误:无法设置未定义的属性“”render“”
EN

Stack Overflow用户
提问于 2019-05-23 15:58:57
回答 1查看 1.2K关注 0票数 0

我在控制台中看到以下错误:

代码语言:javascript
运行
复制
Uncaught TypeError: Cannot set property 'render' of undefined
    at normalizeComponent (componentNormalizer.js?2877:24)...

这个错误确实允许呈现我的视图,它是由created挂钩上的async/await引起的。这非常奇怪,因为我在应用程序的许多地方使用它(主要是在created上调用api时)。下面是完整的组件,我唯一能想到的就是这个组件是从html中分离出来的。

代码语言:javascript
运行
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2020-02-04 21:27:30

我在代码中也遇到了这个问题,这是一个非常令人恼火的错误,因为它没有给你任何线索问题在哪里!

我通过添加我导入的函数(在您的示例中是"questionnairesService“和"diseasesService”函数)来修复它,并将它们作为方法添加到我的Vue组件中:

代码语言:javascript
运行
复制
 methods: {
    questionnairesService,
    diseasesService

    onQueryKeyUp() {
    ...

无论您现在在何处调用导入的函数,您都会改为调用组件方法。因此当前行如下所示:

代码语言:javascript
运行
复制
let dxKey = diseasesService.(....)

然后就变成了

代码语言:javascript
运行
复制
let dxKey = this.diseasesService.(...)

如果您在监视模式下处理代码(就像我一样),那么您必须停止并重新启动/重新构建本地应用程序,这样才能正常工作(否则,即使在修改代码之后,呈现错误仍将存在)。这对我来说就像一个护身符,所以也许它也适用于你。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56270565

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档