Vue.js里methods为什么不能改变data里的值？ - javascript吧

level 1

中二的公蜗牛楼主

代码和疑惑如下，只要加上this.count += 1;就不能正常加载出来了，Dev Tool控制台也没有报错信息。有大佬知道为什么吗？

2020年05月01日 16点05分 1

level 1

鼠狼额额

组件里面的data需要为一个函数，函数内返回对象，对象内写变量
data: function(){
return {
count: 0
}
}
如果你是在实例内写这样写，那么完全没问题

2020年05月01日 20点05分 3

中二的公蜗牛

抱歉我还是不太明白，data里面不是可以直接放属性么？问题是methods为什么不能这样改变data的值呀？

2020年05月02日 02点05分

level 1

略略怪😈

我也像你这样写了，正常加载没问题的呀

2020年05月02日 03点05分 4

中二的公蜗牛

你那边能够在页面上看到一个数字吗？我这边又复制了这里的代码又跑了一遍，还是无限转圈圈。

2020年05月02日 09点05分

略略怪😈

能看到啊，自己要写一个标签来放count，这样就能看到啊，还写了一个按钮，点击绑定下面的的方法，实现了递增的效果，

2020年05月03日 00点05分

略略怪😈

你是不是没写标签放count所以你看不到数据

2020年05月03日 00点05分

中二的公蜗牛

@略略怪😈 直接放count是可以显示出来的，但是我上面的代码放的是函数，就加载出问题了。而且我不是看不到数据，是压根儿加载不出来，哎。。。

2020年05月03日 03点05分

level 2

咸甜适中⛄

不用return

2020年05月02日 16点05分 6

level 11

Darren♂

你调用函数的地方在哪

2020年05月03日 06点05分 7

中二的公蜗牛

<div id="app>{{getCount()}}</div>

2020年05月03日 09点05分

lu198413

@中二的公蜗牛函数需要绑定到标签上，你那样写，函数根本没有触发。举个例子<div id="app"><button @click="getCount">{{count}}</button></div>

2020年05月03日 10点05分

中二的公蜗牛

@lu198413 不是老兄，如果getCount里面没有那一句this.count += 1;，是可以正常显示结果的噢

2020年05月03日 11点05分

lu198413

看看你的报错信息 [Vue warn]: You may have an infinite update loop in a component render function. 渲染组件时，data数据改变了，又去自动渲染页面，如此反复，形成了死循环。所以，你这样写等于把自己带坑里了，参照我上一条的举例，利用事件函数

2020年05月03日 13点05分