场景描述:

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值的更多相关文章

  1. 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化

    使用通配符监听所有自数据字段的变化

  2. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  3. Android_通过ContentObserver监听短信数据变化

    1.简单介绍 在小米等一些机型,无法接收系统发出的短信广播. 仅仅能通过观察者ContentObserver,去监听短信数据的变化 2.SMS数据介绍 content://sms/inbox     ...

  4. 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据

    1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...

  5. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  6. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  7. Android 监听ContentProvider的数据改变

    今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...

  8. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  9. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. 走进Spring Boot源码学习之路和浅谈入门

    Spring Boot浅聊入门 **本人博客网站 **IT小神 www.itxiaoshen.com Spring Boot官网地址:https://spring.io/projects/spring ...

  2. 【Python】CV2的一些基本操作

    ·导入: import cv2 ·读取图片: img = cv2.imread('路径') 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整 ...

  3. 【C/C++】小红的字符串 / 中兴捧月

    考试的时候想复杂了,其实直接一边写放进set里去重就可以了 很有意思 自己的理解就是cpp的map+set或者就是set可以完成大多数java的hashset操作 链接:https://ac.nowc ...

  4. hbuilder打包app基本流程

    声明:本文可能用到一些工具和第三方网站,都是为了达到目的而使用的工具,绝不含有广告成分 1.下载.最新的Hbuilder X貌似不能直接创建移动app了(自己不会用),建议旧版.可去腾某讯软件中心下载 ...

  5. 简单的理解 Object.defineProperty()

    Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性. Object.defineProperty(obj,prop,descriptor ...

  6. SQL 注入基础

    SQL注入 SQL注入是服务器端未严格校验客户端发送的数据,而导致服务端SQL语句被恶意修改并成功执行的行为. 本质:把用户输入的数据当作代码执行.任何和数据库产生交互的地方便有可能存在注入. SQL ...

  7. WebApi的前端调用

    WebApi前端调用 HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  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 ...

  9. MyBatis学习(一)基本配置与使用

    MyBatis学习(一)基本配置与使用 1.前期准备 文件具体架构图 1.配置conf.xml <?xml version="1.0" encoding="UTF- ...

  10. ubantu电脑无法开机修复

    重启Ubuntu,随即长按F9进入grub菜单:在grub菜单中,选择recovery mode,回车确认:在Recovery Menu中,选择"Root Drop to root shel ...