Хобрук: Ваш путь к мастерству в программировании

Фильтровать список ul по входному тексту 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,
 },
};
javascript vue.js vuex vuejs2
20.09.2017

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

Ответы:


1

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

20.09.2017
Новые материалы
Не зря же это называют интеллектом
Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
LeetCode Проблема 41. Первый пропущенный положительный результат
LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
Расистский и сексистский робот, обученный в Интернете
Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
Управление состоянием в микрофронтендах
Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
Структуры данных в C ++ - Часть 1
Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..
Как я опубликовал свое первое приложение в App Store в 13 лет
Как все началось Все началось три года назад летом после моего четвертого класса в начальной школе. Для меня, четвертого класса, лето кажется бесконечным, пока оно не закончится, и мой отец..