입력 텍스트 Vue.js 2를 기준으로 목록 필터링

입력 텍스트 Vue.js 2를 기준으로 목록 필터링

사용자가 입력 파일에 이름이나 이니셜을 입력할 때 하나의 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,
 },
};

다음 예제 필터는 다음 중 하나와 함께 작동하며initials또는 그name.

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/vue@2.4.2"></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>

참조URL: https://stackoverflow.com/questions/46319826/filter-ul-list-by-input-text-vue-js-2