报错：Property or method “xxx“ is not defined on the instance but referenced during render.

不念不忘少年蓝@ 2024-03-04 07:08 188阅读 0赞

报错：Property or method “xxx“ is not defined on the instance but referenced during render.

报错原文：

  • 在这里插入图片描述
  • Property or method “tableData” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

翻译：

  • 属性或方法“tableData”不是在实例上定义的，而是在呈现期间被引用的。通过初始化该属性，确保该属性是响应性的，无论是在data选项中，还是在基于类的组件中。
  • 分析：这个错误的解释很明确，属性“tableData”并没有在“Data”中定义，而是直接在页面初始化的过程中对其进行赋值并在页面中引用其数据。这样的报错会使“tableData”中的数据显示不正常。这个时候我们只要data中定义好“tableData”就解决了，笔者是忘记写了，但当时看到这个报错就很懵，查了一下网上的博文，自己总结一下。

  • data() {

    1. return {
    2.   form: {
    3.     className: '',
    4.     coachId: '',
    5.     classType: ''
    6.   },
    7.   pagi:{
    8.     count:10,
    9.     start:1
    10.   },
    11.   drawer: false,
    12.   coachList:[],
    13.   // tableData:[]    //data中未定义该属性！！
    14. }

    },

    methods: {

    1. async getClassData(){
    2.   let params = {...this.pagi}
    3.   for(let i in this.form){
    4.     if (this.form[i] !== '') {
    5.       params[i] = this.form[i]
    6.     }
    7.   }
    8.   await classList(params).then(res => {
    9.       this.tableData = res.data.data

    //data中未定义该属性！！在created/mounted中调用getClassData函数，即产生报错 

    1.     }
    2.   })
    3. },

    }

  • 因为无法确保该属性在挂载前已经初始化，不能保证该属性是响应式的，有的时候这种错误写法带来的报错不会对页面展示有任何影响，有时反复刷新页面数据会时而正常显示，时而不显示，有的时候则反复刷新也完全无法显示。这取决于你的代码是否在引用该属性前初始化该属性。然而在正常开发中，这种不可控因素不可容忍，所以遇到问题一定要仔细研究解决，不要糊弄或者瞎实验、撞大运，做好沉淀，才能有进步！

发表评论

表情：
评论列表 （有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读