vue.js搭建使用者管理系統練手（八）----實現搜尋功能

我們可以在新增和修改使用者在必要資訊為空時，展示提示資訊，只要把Alert.vue元件引入直接使用就可以了！具體看完整程式碼，然後本節主要是在首頁完成一個搜尋功能，輸入任意的姓名等資訊首頁只展示該使用者資訊：

<template>
  <div class="customers container">
    <Alert v-if="alert"  v-bind:message="alert"></Alert>
    <h1 class="page-header">使用者管理系統</h1>

    <input type="text" class="form-control" placeholder="搜尋" v-model="filterInput">
    <br>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>姓名</th>
          <th>電話</th>
          <th>郵箱</th>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="customer in filterBy(customers,filterInput)">//filterInput就是使用者輸入資訊
          <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>

    </table>
  </div>
</template>

<script>
import Alert from './Alert'
export default {
  name: 'customers',
  data () {
    return {
      customers:[],
      alert:"",
      filterInput:""
    }
  },
  methods:{
    fetchCustomers(){
      this.$http.get("http://localhost:3000/users")
          .then(function(response){
            // console.log(response);
            this.customers = response.body;
          })
    },
    //關鍵就在這個filterBy方法，通過使用者輸入的資訊去match所有使用者的customers陣列資訊
    filterBy(customers,value){
      return customers.filter(function(customer){
         return customer.name.match(value);
      })
    }
  },
  created(){
    if (this.$route.query.alert) {
      this.alert = this.$route.query.alert;
    }
    this.fetchCustomers();
  },
  updated(){
    this.fetchCustomers();
  },
  components:{
    Alert
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

關鍵就在filterBy方法，通過使用者輸入的資訊去match所有使用者的customers陣列資訊！！