Property or method “xx“ is not defined on the instance but referenced during render_property or method "modalstyle" is not defined on

[Vue warn]: Property or method “activeNames” 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.

Property or method “XX” is not defined，使用vue时经常出现该问题，简单记录一下问题出现的原因，可以遇到可以快速找出问题。我这边遇到这个问题是因为如下几种情况：

一、方法名出现该问题：

搜索图中的错误内容，发现“saveObject”为方法名，vue组件中相关代码如下：

组件代码：
<div slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="saveObject">确 定</el-button>
</div>
方法：
saveObject () {
    ....
},
1
2
3
4
5
6
7
8
9

调试发现，是因为“saveObject”方法写在的methods部分的外面，找不到该方法，所以报“方法未定义”的错误。错误原因如下：

二、组件表单属性出现该问题：

搜索图中的错误内容，发现“activeNames”为属性名，vue组件中相关代码如下：

<el-collapse v-model="activeNames"
                 @change="handleChange"
                 class="el-collapse-scope">
</el-collapse>
1
2
3
4

"activeNames"属性通过“v-model”实现表单与data数据的双向绑定，如果v-model绑定的属性出现该问题，说明未在data中进行定义，在data中定义该属性即可。（其他通过v-model绑定的表单元素，若未在data中定义，也会出现该问题）。

在data中定义“activeNames”即可。
data () {
   return {
     activeNames: ['3', '4'],
   },
 },
1
2
3
4
5
6

三、methods属性写错了，写成了method，少了一个字母。

定义方法的methods属性单词写错，也会出现该问题（所有定义在methods且被引用的方法都会报错）。如下图：