vue實現搜索功能

template 部分

<!-- 搜索頁面 -->
<template>
  <div>
    <div class="goback">
      <el-button type="danger" @click="goback">返回</el-button>
    </div>

    <div>
      <el-input v-model="search" placeholder="請輸入內容"></el-input>
      <el-button type="primary" @click="Search">搜索</el-button>
    </div>
    <!-- 搜索后的 -->
    <div v-if="searchData.length>0">
      <ul v-for="(item, index) in searchData" :key="index">
        <li>
          <span>{{item.contact_name}}</span>
          <span>{{item.address}}</span>
          <span>{{item.phone}}</span>
        </li>
      </ul>
    </div>
    <!-- 搜索前的 -->
    <div v-else>
      <ul v-for="(item, index) in list" :key="index">
        <li>
          <span>{{item.contact_name}}</span>
          <span>{{item.address}}</span>
          <span>{{item.phone}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

JS 部分

<script>
import { mapGetters } from "vuex";
import api from "../../api/axiosConfig.js";
export default {
  data() {
    return {
      search: "",
      // 原本展示數據
      list: [],
      // 搜索后的展示數據
      searchData: []
    };
  },

  components: {},

  computed: {
    ...mapGetters(["getAddressList", "getLoginUser"])
  },

  created() {
    // 獲取的接口數據
    this.getList();
  },

  mounted() {},

  methods: {
    goback() {
      this.$router.go(-1);
    },

    // 獲取接口中數據的方法
    getList() {
      let params = {
        id: this.getLoginUser.id,
        token_sc: this.getLoginUser.token_sc
      };
      api.AddressList(params).then(res => {
        // list 就是原始數據
        this.list = res.data;
      });
    },

    Search() {
      // search 是 v-model="search" 的 search
      var search = this.search;
      if (search) {
        this.searchData = this.list.filter(function(product) {
          // 每一項數據
          // console.log(product)
          return Object.keys(product).some(function(key) {
            // 每一項數據的參數名
            // console.log(key)
            return (
              String(product[key])
                // toLowerCase() 方法用於把字符串轉換為小寫。
                .toLowerCase()
                // indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
                .indexOf(search) > -1
            );
          });
        });
      }
    }
  }
};
</script>

看看效果

  這是初始樣式

看看輸入內容，搜索之后的

但是，如果輸入欄沒了內容，下面啥也不顯示里，那我來加工一下