VUE+Element UI 输入框

案例：

image.png

输入框提交内容判断，与后端对接

一、结构 xml

 <div class="message">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
              <div class="name">*您的姓名:</div>
              <el-input v-model="demandInfo.name" placeholder="请输入您的姓名"></el-input>
            </el-col>
            <el-col :span="6">
              <div class="name">*您的电话:</div>
              <el-input v-model="demandInfo.phone" placeholder="请输入您的电话"></el-input>
            </el-col>
            <el-col :span="6">
              <div class="name">*业务类别:</div>
              <el-select v-model="demandInfo.sid" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>

  <el-button type="primary" @click="addDemand">提交</el-button>

二、javascript

 data() {
    return {
      
      options: [],
      demandInfo: {
        name: "",
        phone: "",
        sid: ""
      }
    };
  },

三、方法

 getServiceTypeList() {
      let that = this;
      that.$http
        .post("website/getServiceTypeList")
        .then(function(res) {
          if (res.data.errorCode == 200) {
            that.options = res.data.data;
          } else {
            that.$message.error(res.data.errorMsg);
          }
        })
        .catch(function(e) {
          console.log(e);
        });
    },

四、提交按钮判断

 addDemand() {
      let that = this;
      if (!that.demandInfo.name) {
        that.$message.error("姓名必填");
        return;
      }
      if (!that.demandInfo.phone) {
        that.$message.error("电话必填");
        return;
      }
      if (!that.demandInfo.sid) {
        that.$message.error("业务类别必选");
        return;
      }
      let map = {
        name: that.demandInfo.name,
        phone: that.demandInfo.phone,
        sid: that.demandInfo.sid
      };
      console.log(map);
      that.$http
        .post("website/addDemand", map)
        .then(function(res) {
          if (res.data.errorCode == 200) {
            that.$message.success(res.data.errorMsg);
            that.demandInfo.name = "";
            that.demandInfo.phone = "";
            that.demandInfo.sid = "";
          } else {
            that.$message.error(res.data.errorMsg);
          }
        })
        .catch(function(e) {
          console.log(e);
        });
    }
  },

 created() {
    let that = this;
   
    that.getServiceTypeList();
  }