<template>
//綁定搜索的關(guān)鍵字
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput"/>

?<table ?class="table table-striped">
? ? ? <thead>
? ? ? ? <tr>
? ? ? ? ? <th>姓名</th>
? ? ? ? ? <th>電話</th>
? ? ? ? ? <th>郵箱</th>
? ? ? ? ? <th></th>
? ? ? ? </tr>
? ? ? </thead>
? ? ? <tbody>
? ? ? ? <!-- 遍歷搜索的東西，觸發(fā)filterBy方法遍歷的時候和搜索框內(nèi)容進行匹配 例如name-->
? ? ? ? <!-- 如果不搜索，遍歷的就是所有數(shù)據(jù) -->
? ? ? ? <tr v-for="(item,index) in filterBy(customer,filterInput)" :key="index">
? ? ? ? ? <td>{{item.name}}</td>
? ? ? ? ? <td>{{item.phone}}</td>
? ? ? ? ? <td>{{item.email}}</td>
? ? ? ? ? <!-- 通過對應(yīng)的id查看詳情 ?拼接id-->
? ? ? ? ? <!-- 在details中通過攜帶id發(fā)送后臺請求數(shù)據(jù):to是因為to現(xiàn)在的值是變量要綁定，如果是單純的字符串就不需要綁定-->
? ? ? ? ? <td>
? ? ? ? ? ? <!-- <router-link class="btn btn-default" :to="'/customer/'+item[index]._id" style="backgroundcolor:blue ">查看詳情</router-link> -->
? ? ? ? ? ? <!-- <router-link class="btn btn-default" :to="'/customer/'+item._id" style="backgroundcolor:blue " >查看詳情</router-link> -->
? ? ? ? ? ? <div class="btn btn-default" style="backgroundcolor:blue" @click="handleclick(item)">查看詳情</div>
? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? </tbody>
? ? </table>
? ??
</template>

<script>
export default {
? name: "customers",
? data() {
? ? return {
? ? ? customer: [],
? ? ? filterInput:"",
? ? ? childrenmag:''
? ? };
? },
? ? methods: {
? ? // 異步請求數(shù)據(jù)
? ? async fetchCustomers() {
? ? ? const res = await this.$http.get("/users");
? ? ? this.customer = res.data;
? ? },
? ? filterBy(customers, inputvalue) {
? ? ? // filter方法遍歷整個數(shù)組
? ? ? return customers.filter(customer => {
? ? ? ? // 注意match不能遍里數(shù)字，true,false
? ? ? ? return customer.name.match(inputvalue);
? ? ? });
? ? }
? ? }
</script>