Vue 2 Список данных фильтра и счетчик отображаемых данных - PullRequest
Новая
       28

Vue 2 Список данных фильтра и счетчик отображаемых данных

1 голос
/ 11 апреля 2020

Я новичок в Vue. Это кажется обычной задачей и должно быть простым, но ответ ускользает от меня. У меня есть некоторые данные, которые я хочу отфильтровать, а затем отобразить счетчик в компоненте.

HTML: 

<main class="container-fluid">
    <div class="row" id="main-app">
        <div class="col">
            <div class="card border-secondary mb-3" style="min-height: 400px;">
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Find Items" v-model="search">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card border-secondary mb-3">
                <div class="card-body">
                    <h4 class="card-title">Items <item-counter :count="resultCount"></item-counter></h4>
                    <div class="row">
                        <div class="col" id="results">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item" v-for="app in filteredApps" :key="app.id">
                                    <div class="d-flex w-100 h-100 align-self-center">
                                        <a :href="app.link">{{app.name}}</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Vue JS: 

var ItemCounter = Vue.component('item-counter', {
  props: ['count'],
  template: '<span class="badge badge-primary badge-pill">{{ count }}</span>'
});

var vmResults = new Vue({
  el: '#main-app',
  data: {
    search: '',
    items: [
      {
        "id": 1,
        "name": "Item 1",
        "link": "https://www.google.com"
      },
      {
        "id": 2,
        "name": "Item 2",
        "link": "https://www.google.com"
      },
      {
        "id": 2,
        "name": "Item 3",
        "link": "https://www.google.com"
      },
    ]
  },
  computed: {
    resultCount() {
      return this.data && this.data.length;
    },
    filteredApps: function () {
      if (this.search.trim() === '') {
        return this.items;
      } else {
        return this.items.filter(function (item) {
          let self = this;
          return item.name.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
        });
      }
    }
  },
  components: {
    ItemCounter
  }
});

Я пробовал несколько разных подходов, но ни один не работает. Я получаю сообщение об ошибке при поиске, и счетчик не отображается. Что я делаю не так?

jsfiddle

1 Ответ

1 голос
/ 11 апреля 2020
  • Есть дубликат id ([1, 2, 2])
  • Трюк self/this неправильно сохраняет this извне функции

Вместо этого используйте функцию стрелки es6 : 

filteredApps: function() {
  if (this.search.trim() === '') {
    return this.items;
  } else {
    return this.items.filter(item => { // <-- es6 arrow function preserves `this`
      return item.name.toLowerCase().indexOf(this.search.toLowerCase()) >= 0;
    });
  }
}
  • resultCount должно давать длину отфильтрованных результатов: 
resultCount() {
  return this.filteredApps.length;
}

Обновленная скрипка

...