[ 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"> ...
随机推荐
- Log4j 被曝核弹级漏洞,开发者炸锅了!
大家好,我是鱼皮,开门见山,知名的开源项目 Apache Log4j 出事了! 2021 年 12 月 9 日,该项目被曝存在 严重安全漏洞 ,攻击者只需要向目标机传入一段特殊代码,就能触发漏洞,自由 ...
- 安装Google BBR加速
目录 一.简介 二.安装 三.设置BBR 一.简介 Google BBR 是一款免费开源的TCP拥塞控制传输控制协议, 可以使Linux服务器显著提高吞吐量和减少TCP连接的延迟. 二.安装 1.yu ...
- MySQL数据库字段加密
一.导入表结构 USE `qskj_03`; /*Table structure for table `test` */ DROP TABLE IF EXISTS `test`; CREATE TAB ...
- 【论文笔记】Recommendations as Treatments: Debiasing Learning and Evaluation
Recommendations as Treatments: Debiasing Learning and Evaluation Authors: Tobias Schnabel, Adith Swa ...
- HGAME2021 week3 pwn writeup
一共放出五道题,都不是很难. blackgive 考栈转移,值得注意的一点是转移过去先填充几个ret,因为如果直接在转移过去的地方写rop链,执行起来会覆盖到上面的一些指针,导致程序不能正常输入和输出 ...
- Mac终端学习C笔记
Mac终端自带Clang,是一个C语言.C++.Objective-C语言的轻量级编译器,也可以进行c程序编译.具体Clang和gcc区别不做详细介绍. 终端自动vi编辑器. 终端命令笔记: gcc ...
- CF152A Marks 题解
Content 有 \(n\) 名学生考了 \(m\) 门科目,各得到了自己的成绩单.如果第 \(i\) 个学生的第 \(j\) 个科目的分数 \(a_{i,j}\) 在所有学生中是最高的,那么我们就 ...
- WPF DataGrid OxyPlot 卡顿优化
不是优化,我是想用这个标题吸引遇到相同问题的同学过来看看. UI如下,左边DataGrid有7列,右边OxyPlot显示折线图 列表4000+数据,折线图4000+个点,页面卡的用不了. 体现就是列表 ...
- redis启动报错:Fatal error loading the DB: Invalid argument
redis启动报错 add it to your /etc/rc.local in order to retain the setting after a reboot. Redis must be ...
- 【经验】基于阿里云 Ubuntu 的 LAMP 网站搭建及配置完全教程
本文同步发表在负雪明烛的博客:https://fuxuemingzhu.cn/2016/03/02/My-Aliyun-Server-Setting/ 起因 最近老师让我做一个众筹系统,可以在微信公众 ...