vuex - vue.js的表单逻辑?

问题描述

问 题

现在的需求是: 用户在编辑的信息从数据库里获取之前注册时的信息并以 placeholder的样式展示出来.然后v-model一个对象,提交表单的时候提交这个本地对象就好

<input type="text" class="tpl-form-input" v-model="add_user.name" :placeholder="set_people.name" id="user-name">
// 这个 set_people是从数据库里得到的.
//这个add_user是绑定本地的一个对象,最后提交表单的时候提交这个对象

如图,最后效果是这样.
问题一: 如果一个控件没有 placeholder属性 比如 最后一个 短信服务是一个checkbox类型.那该怎么展示从服务器获取来的数据呢?
问题二: 当用户什么也不输入时,会出现某个验证错误:比如邮箱不能不空. 这显然不是我想要的.我想要的是如果为空就不判断验证了.

解决方案

楼主出现这两个问题的原因和楼主的思路有很大关系，原因出在编辑时，楼主想绑定的并非是表单控件的value，而是其placeholder。不妨这样：
1.add_user对象作为提交时的对象，提前在data属性中初始化每个属性，给出每种类型对应的初始值。
2.watch set_people字段，当set_people数据到达后，给add_user对象赋值。

这样的话楼主完全不用考虑用户在不操作某一表单字段的情况下出现非空验证，这样能保证用户想编辑哪一字段就编辑哪一字段，在其他字段不动的情况下直接提交。（仅供参考）

这篇关于vuex - vue.js的表单逻辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！