vue前端data传给action

1.vue-view

<el-input v-model="u.name" placeholder="请输入用户名"></el-input>
<el-input v-model="u.pwd" placeholder="请输入密码"></el-input>
<button @click=‘login‘>登录</button>

2.vue-data

export default {
  name:‘login‘,
  data:() =>({
    u:{name: ‘abc‘,pwd:‘123‘}
  }), //箭头函数返回对象时,需要将对象包裹在小括号里
}

3.vue-method

methods:{
    login() {this.$store.dispatch(‘fun‘,this.u)}, //调用action中的方法
}

4.vuex-action

export const fun = ({ commit,state },u) => { //action只能接受两个参数
  alert(u.name+","+u.pwd)
}
时间: 2024-10-22 23:34:32

vue前端data传给action的相关文章

vue element-ui,上传文件加载进度条显示效果(使用定时器实现源码分享)

上传文件效果如图: 父组件相关代码 html <drag-upload ref='mychild' action="//接口相关地址" v-model="versionwareList" @submitUploadParent='formSubmit' @input='delUpload' :autoUpload="autoUpload" :visible="visible" :disabled="disabl

CKeditor七牛云JS SDK前端上传插件修改

七牛云官方有放出JS SDK,没有我想使用的CKeditor前端上传插件,所以结合七牛官方的Javascript SDK对CKeditor做了一些修改使它能够直接上传到七牛云,又同时保留了上传到本地服务的接口. 优点和缺点1.在前端上传到七牛云,不消耗服务器带宽和流量.空间.2.保留了CKeditor上传到自己服务器的能力.3.支持拖拽和剪切板黏贴图片上传(因为是保存为png格式,建议只黏贴色彩单调的图片,要不然图片会很大,浪费流量).4.拖拽和剪切板黏贴图片.不支持4M以上的文件,因为没有分块

Vue前端挂载对象时一些思考

最近,在Vue前端调试http请求,无论如何如何也是拦截不了某些http请求.场景是这样的:Java后端组装好Vue对象,然后送到前端,前端通过id来挂载该Vue对象,而该对象中有上传文件或者图片的控件,正是对这些控件的http请求是无法拦截的,所以导致没发设置请求头信息.后来经过对这一场景的梳理,有了一些心得,现记录如下. 在Vue前端开发时,可以通过id来挂载Vue对象,从而展示界面:要是这种对象都是在前端生成的话,那么处理起来很方便:要是该对象是从后端通过Java组装生成的并传输过来的话,

在jsp中选中checkbox后 将该记录的多个数据获取,然后传到Action类中进行后台处理 双主键情况下 *.hbm.xml中的写法

在jsp中选中checkbox后 将该记录的多个数据获取,然后传到Action类中进行后台处理 双主键情况下 *.hbm.xml中的写法 ==========方法1: --------1. 选相应的checkbox后  点删除按钮------------- <!-- *******************删除******************* -->     <input type="image" alt="delete"      src=&

vue的data的数据进行指定赋值,用于筛选条件的清空,或者管理系统添加成功后给部分数据赋值为空

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token &lt;

今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Uncaught SyntaxError: Unexpected token < Uncaught SyntaxError: Unexpected token < 网上搜的大致有几种 1.因为vue在打包上传的时候不会编译es6,需要安装babel来将es6转成es5 . 2.在经过build/web

VUE定义data的三种方式

写法粗糙,只是为了自己工作时方便查看 <script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app">    <span>{{count}}</span>    <button @click="inc">+</button></div><script>var ap

vue的data数据用的是全局变量,变量是普通数据类型,变量改变,data未改变

如果vue的data数据用的是全局变量,变量是普通数据类型,那么当全局变量的值发生改变的的时候,那么data中用的这个值是不会发生改变的,也无法触发视图更新 ,因为是普通数据类型 解决: 全局的普通数据类型改为引用数据类型 Vue({ data:{ tabMouth: tabMouth, tabDay:tabDay, } }) var tabMouth = {value: false}; var tabDay = {value: false}; var tabEventCall = functi

1.VUE前端框架学习记录一

VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0a6c2f23b97d0371032c408e7659917?token=2fd9d925d380fc1d 原文地址:https://www.cnblogs.com/jtfr/p/11185262.html