vue 小demo (随缘更新)

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>