[ vue ] 监听v-model数据的变化,只要有变化就改变vuex的state值
场景描述:

1. 注册弹出框是用 v-model 绑定数据 showRegisterModal 实现的,点击遮罩层框架会把 showRegisterModal=false
2.REGISTER按钮 showRegisterModal=true
3.showRegisterModal 希望是vuex里面的数据,我们可以在任何地方控制弹出框的开和关。
解决方案
<template>
<div class="q-mt-md">
<div>
<q-btn label="Register" @click="showRegisterModal=true"/> <q-dialog v-model="showRegisterModal">
<q-card style="width:400px;">
<Register />
</q-card>
</q-dialog>
</div>
</template> <script>
import Register from 'components/Register.vue'
export default {
components:{Register},
computed:{
showRegisterModal:{
get(){
return this.$store.state.myself.show_register_modal
},
set(value){
this.$store.commit('myself/HANDLE_REGISTER_MODAL', value)
}
}
}
}
</script>
备注
这样实现有点曲线救国,小场景用不到,于是我改进了一下:https://www.cnblogs.com/remly/p/12981671.html
[ vue ] 监听v-model数据的变化,只要有变化就改变vuex的state值的更多相关文章
- 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化
使用通配符监听所有自数据字段的变化
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- Android_通过ContentObserver监听短信数据变化
1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox ...
- 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据
1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- Android 监听ContentProvider的数据改变
今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- Springboot,SSM及SSH的概念、优点、区别及缺点
Springboot的概念: 是提供的全新框架,使用来简化Spring的初始搭建和开发过程,使用了特定的方式来进行配置,让开发人员不在需要定义样板化的配置.此框架不需要配置xml,依赖于像MAVEN这 ...
- linux环境centos
qhost:查看集群 投送到集群qsub -l vf=2G,p=1 work.sh -cwd -V all_section_run.sh 杀死任务 qdel id qstat -u \* |less ...
- JVM堆空间结构及常用的jvm内存分析命令和工具
jdk8之前的运行时数据区域 程序计数器 是一块较小的内存空间,它可以看做是当前线程所执行的字节码的行号指示器.每个线程都有一个独立的程序计数器,这类内存区域为"线程私有",此内存 ...
- 『学了就忘』Linux启动引导与修复 — 72、Linux系统的修复模式(单用户模式)
目录 1.单用户模式常见的错误修复 2.通过单用户模式修改系统密码 (1)进入grub启动引导程序中 (2)编辑相应的系统启动内容 (3)编辑grub配置文件内容 (4)启动系统 (5)修改root用 ...
- Boss直聘App上“天使投资、VC、PE” 与“A轮、B轮、C轮融资”的关系
我们经常看到朋友圈里某某公司获得了某轮融资,所谓的A轮B轮究竟是个什么概念呢?今天就跟小伙伴们分享一下A.B.C.D轮融资与天使投资.VC.PE的关系. 天使投资(AI):天使投资所投的是一些非常早期 ...
- Nginx SERVER块配置
1 Listen 指令 Example Configuration Directives 2 server_name指令 2.1 规则 指令后可以跟多个域名,第一个是主域名 *泛域名:进支持在最前或最 ...
- Python 如何管理类的创建行为
问题 如果我们要给类加上一个属性,只需在定义的时候加上属性就可以了: class Animal: can_fly = True 如果这样的类有很多,我们可以定义一个父类,让其它类继承他就可以了: cl ...
- ciscn_2019_es_1
拿到题目例行检查 将题目放到idax64中进行代码审计 主界面,我也没看懂什么意思 call 可以看到free的指针没有置零,存在uaf漏洞 add函数 show函数 该题的libc版本是2.27,所 ...
- [BUUCTF]REVERSE——[WUSTCTF2020]level3
[WUSTCTF2020]level3 附件 步骤: 例行检查,64位程序,无壳 64位ida载入,找到关键函数 看样子是个base64加密,但又感觉没那么简单,再翻翻左边的函数,找到了base64加 ...
- IDEA 2021.2.1 破解版下载_激活安装图文教程(永久激活,亲测有效)
1.IntelliJ IDEA 2021 链接:https://pan.baidu.com/s/1Pwz3GrrkJdDZzg-wg5UjMw 提取码:56o6 无限重置 30 天试用期补丁 链接:h ...