1 编辑页面
this.$router.push({path:"/", query:{msg:"信息添加成功!"}})
这是跳转
<template>
<div class="add container">
<Alert v-if="alert" v-bind:message="alert"></Alert>
<h1 class="page-header">编辑用户</h1>
<form @submit.prevent="updateCustomer">
// form 要阻止默认事件
<div class="well">
<h4>用户信息</h4>
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" placeholder="姓名" v-model="customer.name">
</div>
</form>
</div>
</template>
<script>
import Alert from "./Alert"
export default {
name : 'add',
data () {
return {
customer: {},
alert: ""
}
},
components:{
Alert
},
methods:{
fetchCustomer(id){
// 获取默认值
this.$axios.get("http://localhost:3000/users/"+id)
.then(res=>{
this.customer = res.data
})
},
updateCustomer(e){
if (!this.customer.name || !this.customer.email || !this.customer.phone){
this.alert="xxx"
}else{
let updateCustomer = {
name:this.customer.name,
phone:this.customer.phone,
email:this.customer.email,
education:this.customer.education,
graduationschool:this.customer.graduationschool,
profession:this.customer.profession,
profile:this.customer.profile
};
this.$axios.post("http://localhost:3000/users", updateCustomer)
.then(res=>{
this.$router.push({path:"/", query:{msg:"信息添加成功!"}})
// 跳转
})
}
}
},
created () {
this.fetchCustomer(this.$route.params.id)
}
}
</script>
2 搜索框
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput">
<tbody>
<tr v-for="customer in filterBy(customers, filterInput)" :key="customer.id">
<td>{{ customer.name }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customer/' + customer.id">详情</router-link></td>
</tr>
</tbody>
<script>
import Alert from "./Alert"
export default {
name: 'customers',
data() {
return{
customers:[],
alert:"",
filterInput:""
}
},
methods:{
fetchCustomers(){
this.$axios.get("http://localhost:3000/users").then
(res=>{
this.customers = res.data
})
},
filterBy(customers, value) {
return customers.filter(function(customer){
return customer.name.match(value);
})
}
},
created(){
if (this.$route.query.msg){
this.alert=this.$route.query.msg
}
this.fetchCustomers();
},
updated(){
this.fetchCustomers();
},
components:{
Alert
}
}
</script>