<script src="js/vue.js"></script>
<script src="js/axios.js"></script>

<div id="app">
<h1>修改请假</h1>
    <div>
    请假类型：
    <select v-model="type">
        <option v-for="item in type_datas" :key="item.id" :value='item.id'>{{item.text}}</option>
    </select>
    </div>
    <div>
    开始日期：<input type="date" v-model="start_date">
    </div>
    <div>
    结束日期：<input type="date" v-model="end_date">
    </div>
    <div>
    请假事由：<input v-model="reason" >

    </div>
    <div>请假人：<span>{{leave_name}}</span></div>
    <input type="button" @click="modify()" value="修改">
    <div style="color:red;">{{msg}}</div>

</div>
<script>
var app = new Vue({
    el: '#app', //el是element缩写
    data: { //数据
        reason:"", // 设置表单控件的默认值
        type:"-1", // 设置表单控件的默认值
        start_date:"", // 设置表单控件的默认值
        end_date:"", // 设置表单控件的默认值
        leave_name:"", // 请假人
        type_datas:[
                   {id:"-1",text:"请选择"},
                   {id:"1",text:"事假"},
                   {id:"2",text:"病假"},
                   {id:"3",text:"产假"},
                   {id:"4",text:"婚假"}
               ],
           msg:""
    },
       methods:{
           modify:function(){
               console.log("点击了修改按钮！")
           //console.log("请假类型：",type) // 错误，需要通过this访问， 相当于java代码，通过this访问成员变量
            console.log("请假类型：",this.type) // 相当于java代码，通过this访问成员变量
            console.log("开始时间：",this.start_date)
            console.log("结束时间：",this.end_date)
            console.log("请假原由：",this.reason)
            //非空校验
            if( this.type === "-1"){
                this.msg="请选择请假类型！"
                return
            }
            if( this.start_date === ""){
                this.msg="请填写开始时间！"
                return
            }
            if( this.end_date === ""){
                this.msg="请填写结束时间！"
                return
            }
            if( this.reason === ""){
                this.msg="请填写请假事由！"
                return
            }
            this.msg=""

            //调用axios发请求，需要通过post方法
            //axios中，通过post传参数，需要通过下面对象
            let params = new URLSearchParams();
            params.append("type", this.type);
            params.append("start_date", this.start_date)
            params.append("end_date", this.end_date)
            params.append("reason", this.reason)

            //因为是修改功能，根据id来进行修改
            var id=getQueryVariable("id")
            params.append("id",id )

            //注意要修改url，复制过来的代码是向添加 servlet发请求
            axios.post('modifyLeave', params)
              .then(function (res) {
                console.log(res);
                if(res.data.code===0){
                    alert("修改成功！");
                    location.href="leaveList2.html"
                }
              })
              .catch(function (error) {// 请求失败处理
                console.log(error);
              });

           }
       },
    mounted:function(){// 加载vue成功，显示数据之前，执行这个函数
        console.log("vue的mounted钩子函数")
        var id=getQueryVariable("id")
        console.log("id=",id)
        var that = this
        //通过axios发送请求，根据id获取请假的详细信息
        axios.get('showLeaveById?id='+id, {
        })
        .then(function (res) {
            console.log(res.data);
            if(res.data.code===0){
                //将返回结果赋值给 vue 的 leave_name
                that.leave_name=res.data.data.real_name
                that.type=res.data.data.l_type
                that.start_date=res.data.data.start_date
                that.end_date=res.data.data.end_date
                that.reason=res.data.data.reason
            }else if(res.data.code === 100){
                alert("数据不存在！")
            }
        })
        .catch(function (error) {// 请求失败处理
            console.log(error);
    });

    }
})

function getQueryVariable(variable){
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}



</script>

原文出处：/show_1IX2oqm450gq.html