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

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

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

### 报错原文： ###

*  ![在这里插入图片描述][9a34d746b5684dc2bf25f6c64277f144.png]
 *  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() {
            return {
              form: {
                className: '',
                coachId: '',
                classType: ''
              },
              pagi:{
                count:10,
                start:1
              },
              drawer: false,
              coachList:[],
              // tableData:[]    //data中未定义该属性！！
            }
          },
         
        methods: {
            async getClassData(){
              let params = {...this.pagi}
              for(let i in this.form){
                if (this.form[i] !== '') {
                  params[i] = this.form[i]
                }
              }
              await classList(params).then(res => {
                  this.tableData = res.data.data   
        //data中未定义该属性！！在created/mounted中调用getClassData函数，即产生报错                                                                          
                }
              })
            },
        }
 *  因为无法确保该属性在挂载前已经初始化，不能保证该属性是响应式的，有的时候这种错误写法带来的报错不会对页面展示有任何影响，有时反复刷新页面数据会时而正常显示，时而不显示，有的时候则反复刷新也完全无法显示。这取决于你的代码是否在引用该属性前初始化该属性。然而在正常开发中，这种不可控因素不可容忍，所以遇到问题一定要仔细研究解决，不要糊弄或者瞎实验、撞大运，做好沉淀，才能有进步！

[9a34d746b5684dc2bf25f6c64277f144.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/04/7b7b2eea5ae14f7189b5d66a580a8157.png

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

发表评论取消回复

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

相关阅读

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

相关详细解决Vue的警告：Property or method “xxx“ is not defined on the instance but referenced during render

相关解决控制台报错：Property or method “showInfo“ is not defined on the instance but referenced during render

相关记一次vue使用template循环报错 Property or method “item“ is not defined on the instance

相关 uni - app - Property or method “toJSON“ is not defined on the instance but referenced during render.

相关 Vue错误——Property or method "toJSON" is not defined on the instance but referenced during render.

相关 VUE 解决：Property or method “deleteFun“ is not defined on the instance but referenced during render.

相关 Vue抛 Property or method "turn" is not defined on the instance but referenced during render. 的解决方法

相关 vue2-preview缩略图插件 Property or method "$preview" is not defined on the instance but referenced

相关 [Vue warn]: Property or method “search“ is not defined on the instance but referenced......