vue-信息管理之编辑和弹框

1.编辑：

<template>
<div class="editinfo container">
 <form role="form">
  <div class="form-group">
    <label for="name">会员ID：</label>
    <input type="text" class="form-control" v-model="addnewuser.id" placeholder="请输入会员ID">
  </div>
  <div class="form-group">
    <label for="name">姓名：</label>
    <input type="text" class="form-control" placeholder="请输入名字" v-model="addnewuser.name">
  </div>
  <div class="form-group">
    <label for="name">性别：</label>
    <input type="text" class="form-control"  placeholder="请输入性别" v-model="addnewuser.sex">
  </div>
  <div class="form-group">
    <label for="name">电话：</label>
    <input type="text" class="form-control"  placeholder="请输入电话" v-model="addnewuser.tel">
  </div>
  <div class="form-group">
    <label for="name">等级：</label>
    <input type="text" class="form-control"  placeholder="请输入等级" v-model="addnewuser.grade">
  </div>
  <div class="form-group">
    <label for="name">积分：</label>
    <input type="text" class="form-control"  placeholder="请输入积分"  v-model="addnewuser.jf">
  </div>
  <div class="form-group">
    <label for="name">已消费：</label>
    <input type="text" class="form-control"  placeholder="请输入消费情况"  v-model="addnewuser.consume">
  </div>
  <div class="form-group">
    <label for="name">余额：</label>
    <input type="text" class="form-control"  placeholder="请输入余额"  v-model="addnewuser.balance">
  </div>
   <button type="submit" class="btn btn-info" @click="fix">修改</button>
</form>
</div>
</template>


<script>
export default{
name:"editinfo",
data(){
return{
addnewuser:[]
}
},

methods:{
getuserinfo:function(id){
this.$http.get("http://localhost:3000/user/"+id).then(function(response){
this.addnewuser=response.data;
})
},
fix:function(e){
var edituserinfo={
  id:this.addnewuser.id,
  name:this.addnewuser.name,
  sex:this.addnewuser.sex,
  tel:this.addnewuser.tel,
  grade:this.addnewuser.grade,
  jf:this.addnewuser.jf,
  consume:this.addnewuser.consume,
  balance:this.addnewuser.balance
}
var id=this.$route.params.id
this.$http.put("http://localhost:3000/user/"+id,edituserinfo).then(function(){
this.$router.push({path:'/',query:{alert:"修改信息成功"}})
})
e.preventDefault();
}
},
created:function(){
this.getuserinfo(this.$route.params.id);
}
}
</script>


<style>

</style>

2.弹框

<template>
<div class="alert alert-success alert-dismissable">
{{message}}
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
        
        </div>

</template>


<script>
export default{
name:"alert",
props:["message"],
data(){
return{

}
}
}
</script>


<style>
</style>