67 lines
2.3 KiB
Vue
67 lines
2.3 KiB
Vue
<template>
|
|
<div class="jumbotron">
|
|
<h2>Edit User</h2>
|
|
<div class="form-group">
|
|
<label for="inputName">Name</label>
|
|
<input
|
|
type="text" class="form-control" v-model="user.name"
|
|
name="name" id="inputName"
|
|
placeholder="Fullname"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputEmail">Email</label>
|
|
<input
|
|
type="email" class="form-control" v-model="user.email"
|
|
name="email" id="inputEmail"
|
|
placeholder="Email address"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputAge">Age</label>
|
|
<input
|
|
type="number" class="form-control" v-model="user.age"
|
|
name="age" id="inputAge"
|
|
placeholder="Age"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="department_id">Department:</label>
|
|
<select class="form-control" id="department_id" name="department_id" v-model="user.department_id" >
|
|
<option v-for="department in departments" v-bind:value="department.id"> {{ department.name }} </option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<a class="btn btn-default" v-on:click.prevent="saveUser()">Save</a>
|
|
<a class="btn btn-default" v-on:click.prevent="cancelEdit()">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
module.exports={
|
|
props: ['user', 'departments'],
|
|
methods: {
|
|
saveUser: function(){
|
|
axios.put('api/users/'+this.user.id, this.user)
|
|
.then(response=>{
|
|
// Copy object properties from response.data.data to this.user
|
|
// without creating a new reference
|
|
Object.assign(this.user, response.data.data);
|
|
this.$emit('user-saved', this.user)
|
|
});
|
|
},
|
|
cancelEdit: function(){
|
|
axios.get('api/users/'+this.user.id)
|
|
.then(response=>{
|
|
// Copy object properties from response.data.data to this.user
|
|
// without creating a new reference
|
|
Object.assign(this.user, response.data.data);
|
|
this.$emit('user-canceled', this.user);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |