[ 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"> ...
随机推荐
- 干掉visio,这个画图神器太香了
前言 看过我以往文章的小伙伴可能会发现,我的大部分文章都有很多配图.我的文章风格是图文相结合,更便于大家理解. 最近有很多小伙伴发私信问我:文章中的图是用什么工具画的.他们觉得我画的图风格挺小清新的, ...
- $(document).ready()与window.onload的区别,站在三个维度回答问题
1.执行时机 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...
- 基于TSN 802.1AS协议的时间同步分析(7种延时,1次厘清)
前言 往期的时间同步--802.1AS协议介绍一文向大家介绍了802.1AS协议的基本内容,基于时间同步协议就能实现主节点与各从节点的时间同步,但是如何评价时间同步的优劣呢?这就需要我们通过一些时间同 ...
- Mybatis动态SQL语句使用
在实际开发中,有时候查询条件可能是不确定的,查询条件可能有多条也可能没有,这时候就需要用到动态的sql语句拼接功能. 一.if.where.sql标签的使用 需求:在一些高级查询中,查询条件存在的个数 ...
- pf4j及pf4j-spring
什么是PF4J 一个插件框架,用于实现插件的动态加载,支持的插件格式(zip.jar). 核心组件 Plugin:是所有插件类型的基类.每个插件都被加载到一个单独的类加载器中以避免冲突. Plugin ...
- A New Discrete Particle Swarm Optimization Algorithm
题目:一种新的离散粒子群优化算法 中文摘要 粒子群优化算法在许多优化问题上表现得非常好.粒子群优化算法的缺点之一是假设算法中的变量为连续变量.本文提出一个新的粒子群优化算法,能够优化离散变量.这个新算 ...
- mysql联合索引阻碍修改列数据类型:BLOB/TEXT column 'name' used in key specification without a key length
今天在项目中mysql表中有一个字段数据类型为varchar,长度不够需要换为text类型 当时表是已经存在的表, CREATE TABLE `table_aaa` ( `id` int NOT NU ...
- 例外日期(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 日历无论怎么样自定义,只要仍是存在固化规律的,就铁定会坏事,因为人类的历史就是在大规律中掺杂着无数无规律,再由无数无规律凝 ...
- CF513B1 Permutations 题解
Content 给定两个整数 \(n,m\).定义 \(f(p)=\sum\limits_{l=1}^n\sum\limits_{r=l}^n\min\limits_{i=l}^rp_i\),其中 \ ...
- LuoguB2102 计算鞍点 题解
Content 给定一个 \(5\times 5\) 的矩阵,请在这个矩阵中找出一个元素,使得这个元素既是它所在行的最大值,也是它所在列的最小值. Solution 如果直接暴力枚举每一个元素,再去算 ...