vue.js中表单的数据（一）-- 搜集要提交的数据

当你需要提交一个表单的数据时，前端是vue.js时，会非常的简单。主要是思路要对，它与用jQuery写不同。

今天讲解，一个表单，填写完成后，传递给后台提交。

首先，你要清楚，你打算提交的数据的格式与每个表单你想要传递的名字。请在 data中将这些数据定义清楚。这种方法，尤其在你的表单结构很复杂时，特别有用。表单结构复杂时，清晰的将数据传递给后台也非常重要。

data:{newTabActivityData:{
          activityBasic:{activityName:null,startTime:null,endTime:null},
          activityRule:[{name:null,type:null,options:null,default:null,isRequired:null,isChosen:null}]
        } }

其次，使用v-model将这些变量绑定到对应的表单上面去。这样实现双向绑定。当原始数据中有值时，则会显示这些数据，当表单中改变数值时，也会传递到这绑定的数据当中。下例为一个完整的表单。大家关注如何绑定数据的即可。

          <form class="tab-content new-tab"
                :class="{active:tab==0}"
                id="newTabActivity">
            <div class="form-group-ml">
              <label for="newActivityName">活动名称</label>
              <input class="form-control-ml"
                     v-model="newTabActivityData.activityBasic.activityName"
                     id="newActivityName" name="newActivityName" type="text"/>
            </div>
            <div class="form-group-ml">
              <label for="newActivityStartDate">活动开始时间</label>
              <input class="form-control-ml"
                     v-model="newTabActivityData.activityBasic.startTime"
                     id="newActivityStartDate" name="newActivityStartDate" type="date"/>
            </div>
            <div class="form-group-ml">
              <label for="newActivityEndDate">活动结束时间</label>
              <input class="form-control-ml"
                     id="newActivityEndDate"
                     v-model="newTabActivityData.activityBasic.endTime"
                     name="newActivityEndDate" type="date"/>
            </div>
            <div class="form-group-ml rule">
              <label for="newActivityEndDate">活动结束时间</label>
              <button
                  type="button"
                  @click="addRule('newTab')"
                  class="btn btn-info add-rule">增加规则</button>
              <table class="table table-bordered table-responsive">
                <thead>
                  <tr>
                    <td>规则名称</td>
                    <td>规则类型</td>
                    <td>选项内容</td>
                    <td>默认</td>
                    <td>是否必填</td>
                    <td>选项</td>
                    <td>删除</td>
                  </tr>
                </thead>
                <tbody v-for="(rule,index) in newTabActivityData.activityRule">
                  <tr>
                    <td>
                      <input
                          name="ruleName"
                          v-model="rule.name"
                          type="text"/>
                    </td>
                    <td>
                      <select
                          class="custom-select"
                          name="ruleTypes"
                          v-model="rule.type"
                          >
                        <option value="0">单选</option>
                        <option value="1">多选</option>
                        <option value="2">输入框</option>
                        <option value="3">下拉框</option>
                      </select>
                    </td>
                    <td>
                      <input
                          name="option"
                          v-model="rule.option"
                          type="text"/>
                    </td>
                    <td>
                      <input
                          name="default"
                          v-model="rule.default"
                          type="text"/>
                    </td>
                    <td>
                      <input
                          name="isRequired"
                          v-model="rule.isRequired"
                          type="text"/>
                    </td>
                    <td>
                      <input
                          name="isChosen"
                          v-model="rule.isChosen"
                          type="checkbox"/>
                    </td>
                    <td class="delete-rule" @click="deleteRule('newTab',index)">delete</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div>
              <button type="button" class="btn btn-success submit" @click="submitNewActivity()">submit</button>
            </div>
          </form>

这样我们就轻松的将用户的数据收集到 newTabActivityData当中了。