vue 解决computed修改data数据的问题
更新时间：2019年11月06日 11:46:56 作者：sunshine08_07
今天小编就为大家分享一篇vue 解决computed修改data数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在做项目的时候遇见一个问题，computed修改data数据的时候会报错。报错的大概意思是，不可以修改data数据的属性值。查了一些答案，最终解决办法是需要用到set和get。看代码：
data () {
return {
fold: false
}
}
我想修改fold的值，如果不用get和set就会报错！！！
computed:{
listShow: {
get: function () {
if (!this.totalCount) {
return false
}
return this.fold
},
set: function () {
if (!this.totalCount) {
this.fold = false
return false
}
}
}
get里面的值可以在页面加载或者数据改变的时候实时更新，但是set方法里面的如果想起作用，你需要调用listShow才会起作用。
看代码：
methods: {
toggleList () {
if (!this.totalCount) {
return
}
this.listShow = false//这里需要调用一下
this.fold = !this.fold
},
}
如果不调用的情况下，逻辑都写到get里面，就可以实时更新了。
以上这篇vue 解决computed修改data数据的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧2021-06-06
在 Web 应用程序中,有时需要为某些内容提供全屏显示的功能,本文将介绍如何使用 Vue.js 3 的 Composition API 创建一个全屏功能的工具类,希望对大家有所帮助2024-03-03
这篇文章主要介绍了vue项目使用uniapp生成app的全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
如何封装axios form-data针对统一的formData入参方式
这篇文章主要介绍了如何封装axios form-data针对统一的formData入参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了Vue3中useLocalStorage用法的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下2023-10-10
这篇文章主要介绍了vue 如何获取视频第一帧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在本篇文章里小编给大家分享的是一篇关于vue props 单项数据流实例分享内容，需要的朋友们可以参考下。2020-02-02
这篇文章主要介绍了vue3点击出现弹窗后背景变暗且不可操作的实现代码,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue cli3.0打包上线静态资源找不到路径的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要介绍了elementui导出数据为xlsx、excel表格，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论