[ 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"> ...
随机推荐
- 走进Spring Boot源码学习之路和浅谈入门
Spring Boot浅聊入门 **本人博客网站 **IT小神 www.itxiaoshen.com Spring Boot官网地址:https://spring.io/projects/spring ...
- 【Python】CV2的一些基本操作
·导入: import cv2 ·读取图片: img = cv2.imread('路径') 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整 ...
- 【C/C++】小红的字符串 / 中兴捧月
考试的时候想复杂了,其实直接一边写放进set里去重就可以了 很有意思 自己的理解就是cpp的map+set或者就是set可以完成大多数java的hashset操作 链接:https://ac.nowc ...
- hbuilder打包app基本流程
声明:本文可能用到一些工具和第三方网站,都是为了达到目的而使用的工具,绝不含有广告成分 1.下载.最新的Hbuilder X貌似不能直接创建移动app了(自己不会用),建议旧版.可去腾某讯软件中心下载 ...
- 简单的理解 Object.defineProperty()
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性. Object.defineProperty(obj,prop,descriptor ...
- SQL 注入基础
SQL注入 SQL注入是服务器端未严格校验客户端发送的数据,而导致服务端SQL语句被恶意修改并成功执行的行为. 本质:把用户输入的数据当作代码执行.任何和数据库产生交互的地方便有可能存在注入. SQL ...
- WebApi的前端调用
WebApi前端调用 HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...
- pdf2swf转换不成功该怎么解决啊,Process p=r.exec("D:/swf/pdf2swf.exe \""+pdfFile.getPath()+"\" -o \""+swfFile.getPath()+"\" -T 9");
pdf2swf转换不成功该怎么解决啊,可以这样解决吧,请注意命令的用法啊:Process p=r.exec("D:/swf/pdf2swf.exe \""+pdfFil ...
- MyBatis学习(一)基本配置与使用
MyBatis学习(一)基本配置与使用 1.前期准备 文件具体架构图 1.配置conf.xml <?xml version="1.0" encoding="UTF- ...
- ubantu电脑无法开机修复
重启Ubuntu,随即长按F9进入grub菜单:在grub菜单中,选择recovery mode,回车确认:在Recovery Menu中,选择"Root Drop to root shel ...