使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空。

组件中关联:

<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="排序号">
<el-input v-model="form.sort" placeholder="请输入排序号"></el-input>
</el-form-item>
<el-form-item label="编码">
<el-input v-model="form.categoryCode" placeholder="请输入种类编号/代码"></el-input>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="form.categoryName" placeholder="请输入种类名称"></el-input>
</el-form-item>
<el-form-item label="禁用">
<input type="checkbox" v-model="form.status" />禁用
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default { computed: mapGetters({
form:"categoryForm"
}),
methods: {
...mapActions({
onSubmit:"addCategory"
})
}
}
</script>

vuex中的配置为:

const state = {
// 初始化表单
_categoryForm: {}
} const getters = {
//类别表单
categoryForm: state => state._categoryForm
} const actions = { /**
* 新增类别
*/
addCategory(context) {
var formData = context.getters.categoryForm
//Web API 调用
dictServer.addCategory(formData, function (body) {
//成功回调函数
context.commit("DICT_ADDED_CATEGORY", true, body)
}, function (body) {
//失败回调函数
context.commit("DICT_ADDED_CATEGORY", false, body)
});
}
} const mutations = {
//新增类别后
[types.DICT_ADDED_CATEGORY](state, isSuccess, body) {
if (isSuccess) {
//state._categoryForm = {} //不起作用,必须使用下面的方法
state._categoryForm = {
sort:"",
categoryCode: "",
categoryName: "",
status:false,
remark:""

}

//其他操作
} else {
//操作不成功时操作
}
},

看红字部分,初始化时 直接赋值为空对象即可(_categoryForm: {} ) ,但新增成功后,重置表单 state._categoryForm = {}  却不起作用,必须对其每个元素单项设置才起作用:

      state._categoryForm = {
sort:"",
categoryCode: "",
categoryName: "",
status:false,
remark:""

}

另:element-ui(1.0.6) 中的 Switch开关 Radio单选框  Checkbox多选框 对于空元素无能为力,不是滑块移动不了,就是点击没有反应,现只能用原生的<input>元素代替。 

你以为这样就可以了吗?太天真了少年!初次提交后,表单是会重置,但是只要再次在<input>里输入了内容,开发工具里立即监控到错误:

官方文档说的清楚(http://vuex.vuejs.org/zh-cn/forms.html):
当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会比较棘手:

<input v-model="obj.message">
假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。在严格模式中,由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

办法倒是有,按官方给出的解决方案,是为每个属性添加get/set属性,但在一般的信息系统中,录入页面起码几十个<input>元素,为每个元素建立get/set属性,再在Vuex存储文件里建立相应的state get action mutation!需要添加的代码太多了!!!不现实。

为解决这个问题,在网上找了半天答案,找到的例子都是些习作,一个表单2个录入框,3-4个页面的学习型小小型项目,根本没有大型的应用的例子!

现在卡在这儿了!

其实要解决也简单:只要改个参数即可:

export default new Vuex.Store({
actions,
getters,
modules: { },
//不采用严格模式
//strict: debug
strict: false

})

但这样好像不符合官方建议的规范!

经过这个月来的实践,感觉Vue在开发应用系统方面坑太多了,双向绑定是不错,但是使用了Vuex后立马变成坑了!!!目前阶段只能用来做些简单的系统,逻辑复杂的系统还是采用传统的java C# php构建比较靠谱。

vue + vuex 表单处理的更多相关文章

  1. vue的表单编辑删除,保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  2. Vue.js表单校验;动画指令;避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  3. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  4. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  5. vue b表单

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v- ...

  6. Vue(六) 表单与 v-model

    学习使用 v-model 指令完成表单数据双向绑定 基本用法 表单控件在实际业务较为常见,比如单选,多选.下拉选择.输入框等,用他们可以完成数据的录入.校验.提交等.Vue.js 提供了 v-mode ...

  7. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  8. 使用vue做表单验证

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

  9. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

随机推荐

  1. 百度背景画面切换效果,js做

    <!DOCTYPE html><html><head> <title>baidu</title> <meta charset=&quo ...

  2. (转)xml节点和元素的关系 .

    XML节点是什么呢?当我们在处理XML文件的时候必须要明白XML节点的概念,那么从这里的讲述,你将会了解XML节点对于XML文件的意义,希望对你有所帮助. 在我们学习LINQ删除XML节点之前我们先来 ...

  3. android bindService()

    bindService简介 Service一般用于不用显示,运行在后台的服务. startService 是我们最常用的启动Service的方法.而如何让service与其他组件通信呢?一般在一个进程 ...

  4. Nginx配置域名跳转实例

    要求:浏览器地址栏输入qj.123.com之后,地址自动变成qj.abc.com 配置nginx跳转 server { listen 80; server_name qj.abc.com qj.123 ...

  5. zookeeper主要使用场景

    场景一:有一组服务器向客户端提供某种服务,我们希望客户端每次请求服务端都可以找到服务端集群中某一台服务器,这样服务端就可以向客户端提供客户端所需的服务.对于这种场景,我们的程序中一定有一份这组服务器的 ...

  6. 全世界最详细的一步一步搭建RAC步骤(一)---安装操作系统RHEL4.6【weber出品】

    全文搭建RAC分为3步骤 <--安装操作系统RHEL4.6> <--配置ASM+裸设备> <--安装集群软件>       <--安装数据库软件>   ...

  7. "float: left;" div 不换行显示

    <div id='p'> <div id='c1'> </div> <div id='c2'> </div> <div id='c3' ...

  8. 【C++学习之路】派生类的构造函数(二)

    二.有内嵌对象的派生类 1.一般来说,我们会这样定义构造函数 student( int i, string nam, int pid, string pnam, int sid) : person( ...

  9. jquery1.9学习笔记 之选择器(基本元素一)

    所有选择器("*") 描述:选择所有元素 注意:大多数情况下,这个选择器极其的慢,尤其是在作用于自身时. 例子: 查找文档中的每个元素.然后追加一个<script>或& ...

  10. Linux下部署Symfony2对app/cache和app/logs目录的权限设置

    在linux下部署完Symfony2,可能在访问的时候会报app/logs或者app/cache目录没有写权限的错误.在linux下,如果我们在命令行登陆的用户和web应用服务器(apache.ngi ...