javascript - 通过输入文本过滤 ul 列表 Vue.js 2

Question

当用户在输入字段中键入名称或姓名首字母时，我想过滤一个 ul 列表。我正在使用 vue.js 2。该列表正在调用存储变量(一个 JSON 文件)进行渲染。

存储变量

$store.coin.coin

JSON 示例

{
 "coin": [
 {
  "initials": "DLR",
  "price": "0.727282",
  "volume": "1212",
  "change": "+1.22",
  "name": "dollar"
 }, ...
 ]
}

HTML

          <li>
            <div class="input-group search-box">
              <input id="filter-coins" v-model="search" placeholder="Filter" class="input-group-field" type="text">
            </div>
          </li>
          <li class="tabs-title" v-for="item in filteredItems" :key="item.initials" >
            <a href="#coinList" aria-selected="true">
              <div class="grid-x">
                <div class="auto cell">{{ item.initials }}</div>
                <div class="auto cell">{{ item.price }}</div>
                <div class="auto cell">{{ item.volume }}</div>
                <div class="auto cell">{{ item.change }}</div>
                <div class="auto cell">{{ item.name }}</div>
              </div>
            </a>
          </li>

方法

  export default {
    name: 'coins',
    search: '',
   computed: {
    filteredItems() {
      return this.$store.coin.coin.filter(item =>
        (item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1));
    },
   },
  };

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import coin from '../data/coins-btc.json';

Vue.use(Vuex);

export default {
 state: {
  coin,
  },
 getters: {
  coin: state => state.coin,
 },
};

Answer 1

下面是一个示例过滤器，可与姓名首字母或名称配合使用。

computed:{
  filteredItems(){
    let coins = this.$store.getters.coin.coin
    // if there is no filter, return everything
    if (!this.search) return coins

    // setup the filter function
    let searchValue = this.search.toLowerCase()
    let filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
                         coin.name.toLowerCase().includes(searchValue)

    return coins.filter(filter)
  }
}

这是一个实际的例子。

console.clear()

const store = new Vuex.Store({
  state: {
    coin: {
      "coin": [
        {
          "initials": "DLR",
          "price": "0.727282",
          "volume": "1212",
          "change": "+1.22",
          "name": "dollar"
        },
        {
          "initials": "EUR",
          "price": "0.727282",
          "volume": "1212",
          "change": "+1.22",
          "name": "euro"
        },
        {
          "initials": "AUS",
          "price": "0.727282",
          "volume": "1212",
          "change": "+1.22",
          "name": "australian"
        }        
      ]
    }
  },
  getters:{
    coin: state => state.coin
  }
})

new Vue({
  el: "#app",
  store,
  data:{
    search: null
  },
  computed:{
    filteredItems(){
      let coins = this.$store.getters.coin.coin
      // if there is no filter, return everything
      if (!this.search) return coins
      
      // setup the filter function
      let searchValue = this.search.toLowerCase()
      let filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
                           coin.name.toLowerCase().includes(searchValue)
      
      return coins.filter(filter)
    }
  }
})

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7305061633415d475d41" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="app">
  <ul>
    <li>
      <div class="input-group search-box">
        <input id="filter-coins" v-model="search" placeholder="Filter" class="input-group-field" type="text">
      </div>
    </li>
    <li class="tabs-title" v-for="item in filteredItems" :key="item.initials" >
      <a href="#coinList" aria-selected="true">
        <div class="grid-x">
          <div class="auto cell">{{ item.initials }}</div>
          <div class="auto cell">{{ item.price }}</div>
          <div class="auto cell">{{ item.volume }}</div>
          <div class="auto cell">{{ item.change }}</div>
          <div class="auto cell">{{ item.name }}</div>
        </div>
      </a>
    </li>
  </ul>

</div>