Sail


手在键盘敲很轻


Vue warn--Make sure to declare reactive data properties in the data option.

本文记录开发Vue应用时的一个BUG

错误大致如下

1
2
3
[Vue warn]: Property or method "xxxxxxxxx" is not defined on the instance but
referenced during render.
Make sure to declare reactive data properties in the data option.


重现BUG

  • 以下是我重现问题的demo

vue-warn-make-sure-to-declare-reactive-data-properties-in-the-data-option0.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="left" >
<p id="text-left">{{ message }}</p>
</div>


// var leftImage = new Vue ({
// el:"#left"
// });

var leftText = new Vue({
el:"#text-left",
data:{
message: '前端'
}

});

这种情况下页面是正常的,页面会显示前端两个字


可如果我们取消掉注释,错误信息如下

vue-warn-make-sure-to-declare-reactive-data-properties-in-the-data-option1.png

1
2
3
[Vue warn]: Property or method "message" is not defined on the instance but
referenced during render.
Make sure to declare reactive data properties in the data option.

vue-warn-make-sure-to-declare-reactive-data-properties-in-the-data-option2.png

页面中没有了”前端”两字


解决

这里我直接给出解释

去掉注释,有两个vue实例,p标签对应的实例是在div内部。这种情况message是挂载在p标签对应的实例的data属性里的。

根据报错信息的意思是,Property or method “message” is not defined on the instance but referenced during render。

message没有被定义,页面渲染的时候却存在。

文档里,data部分说,推荐在创建实例之前,就声明所有的根级响应式属性。

所以data属性应该写在最外层的实例里面。如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="left" >
<p id="text-left">{{ message }}</p>
</div>

var leftImage = new Vue ({
el:"#left",
data:{
message: '前端'
}
});

var leftText = new Vue({
el:"#text-left"
});
© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬