Фильтровать список ul по вводимому тексту Vue.js 2

Question

Фильтровать список ul по вводимому тексту Vue.js 2

1

Я хочу отфильтровать один список ul, когда пользователь вводит вместо имени или инициалов входной файл. Я работаю с vue.js 2. В списке отображается вызов переменной store, 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,
 },
};

lopezi 20 сен. 2017, в 13:36

Источник

1

Можете ли вы сделать jsFiddle с вашим кодом?
Sergio 20 сен. 2017, в 11:41
0

если я сделаю скрипку, я не смогу загрузить данные из $ store, что мне кажется самым большим различием между stackoverflow.com/questions/41712791/… ?
lopezi 20 сен. 2017, в 12:11
0

В чем проблема?
pate 20 сен. 2017, в 17:50
0

ну, с этой настройкой я на самом деле ничего не вижу в списке. если я заменю фильтруемые элементы на $ store.coin.coin, я вижу все элементы li, отображаемые
lopezi 20 сен. 2017, в 18:11

Показать ещё 2 комментария

Теги:

javascript

vue.js

vuejs2

vuex

1 ответ

Ещё вопросы

Можете ли вы сделать jsFiddle с вашим кодом?
если я сделаю скрипку, я не смогу загрузить данные из $ store, что мне кажется самым большим различием между stackoverflow.com/questions/41712791/… ?
ну, с этой настройкой я на самом деле ничего не вижу в списке. если я заменю фильтруемые элементы на $ store.coin.coin, я вижу все элементы li, отображаемые

Bert · Accepted Answer · 2017-09-20T16-54-00.000Z

Вот пример фильтра, который работает либо с 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/[email protected]"></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>