Vue.js leeren Sie die Ergebnisse filtern

In Vue habe ich, durch filtern einige Daten:

<input v-model="search">
<ul>
    <li v-repeat="photo in photos | filterBy search in 'name'">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>

Woran kann ich erkennen, leeren Sie die Ergebnisse filtern und die Anzeige einer entsprechenden Meldung an den Benutzer?

BEARBEITEN

Ich bin derzeit dabei die folgende, die ich fühle, ist ein hacky Problemumgehung:

HTML:

<input v-model="search">
<ul>
    <li v-repeat="photo in photos">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>

Javascript:

var v = new Vue({
    data: {
        allPhotos: [...],
        photos: [],
        search: '',
    },
    ready: function () {
        var filter = Vue.filter('filterBy');
        var self = this;
        this.$watch('search', function () {
            self.photos = filter(self.allPhotos, self.search, 'name');
        }, {
            immediate: true
        });
    }
})

InformationsquelleAutor Andrew Willis | 2015-09-23

vue.js

14

Vue 2.x (Update)

In Vue 2.x-Filter können nur verwendet werden, als docs sagen, im text Interpolationen:

Vue 2.x-Filter können nur verwendet werden, innerhalb Schnurrbart-Bindungen. Zu erreichen ist das gleiche Verhalten innerhalb der Richtlinie Bindungen, sollten Sie Berechnete Eigenschaften statt.

Erzielen Sie dasselbe Verhalten mit JavaScript- filter Methode und berechnete Eigenschaft.
```
<input v-model="searchQuery">

<span v-if="!filteredItems.length">No results.</span>

<ul>
    <li v-for="item in filteredItems"></li>
</ul>
```
```
computed: {
  filteredItems: function () {
    var self = this;
    return self.items.filter(function (item) {
      return item.indexOf(self.searchQuery) !== -1;
    })
  }
}
```
Vue 1.x (Original-Antwort)

Gibt es zwei Möglichkeiten im moment. In allen Fällen, Vorlage gleich Aussehen.
```
<input v-model="searchQuery">

<span v-if="!filteredItems.length">No results.</span>

<ul>
    <li v-for="item in filteredItems"></li>
</ul>
```
filterBy

Original filterBy Methode aufrufen über $options.
```
computed: {
    filteredItems: function () {
        return this.$options.filters.filterBy(this.items, this.searchQuery);
    }
}
```
$eval

Ein wenig sauberer Ansatz. Eval Ausdruck, wie Sie tun würden, in die Vorlage.
```
computed: {
  filteredItems: function () {
    return this.$eval('items | filterBy searchQuery');
  }
}
```
- Hat diese Methode Hinzugefügt wurden Vue.js vor kurzem? Ich weiß, es gab eine Menge von änderungen zu Vue.js vor kurzem, und diese option nicht angezeigt werden, zur Verfügung an der Zeit! Ich bin der Annahme Ihrer Antwort, denn es ist mehr relevant für 'jetzt' aber, gute Arbeit!
- Sie könnten $eval, damit es ein wenig sauberer und tun, wie return this.$eval('items | searchQuery') und es würde auch ermöglichen es Ihnen, um die Kette mehr Filter deutlich.
- Es ist sehr wahrscheinlich. Version >1.0 hat eine Menge Veränderungen mit sich.
- Wie kann ich geben Sie die item-Eigenschaft filter mit?
- Diese Antwort ist nicht mehr gültig Vue 2.0. Ich glaube, dass Dewey Waspada Antwort unten ist die beste (und die einzige, die arbeitet immer noch mit 2.0).
- Du hast Recht. Ich habe aktualisiert Antwort 🙂
- Ich möchte ein Beispiel geben, wie gut. Auch wenn es so ziemlich genau das, was Dewey Waspada vorgeschlagen.
InformationsquelleAutor Jędrzej Chałubek
8

In HTML:
```
<input v-model="search">
<h4 v-if="!filteredPhotos.length">No results</h4>
<ul>
    <li v-for="photo in filteredPhotos">
        <img :src="photo.src" :alt="photo.name">
    </li>
</ul>
```
In JS, die Sie benötigen, um berechnete Eigenschaften wie diese:
```
computed: {
  filteredPhotos: function () {
      return this.photos.filter(function(photo){
          return photo.name.indexOf(this.search) > -1;
      }.bind(this));
  }
}
```
Demo: http://jsfiddle.net/crswll/Lr9r2kfv/37/
- Danke, du hast den Tag gerettet! BTW ich verwende v-attr für die Einstellung der dynamischen Attribute, aber ich dachte, für die Zwecke der demonstration, um den Fokus auf das Problem, das ich hatte!!!
- Besuch dieser Frage wieder nach einer Weile. Dies ist definitiv der richtige Ansatz, vor allem mit Vue 2.0.
InformationsquelleAutor Jihad Waspada
2

Dies funktioniert nur mit Vue 1.0, auch dann sollten Sie nur verwenden eine berechnete Eigenschaft. Ich lasse diese Antwort hier nur für den Fall.

Könnten Sie vm.$eval und eine berechnete Eigenschaft, dies zu tun als gut.
```
computed: {
  filteredItems: function () {
    return this.$eval('items | filterBy searchQuery');
  }
}
```
und so etwas wie
```
<div v-if="filteredItems.length">
  <div v-for="item in filteredItems">
    {{ item.name }}
  </div>
</div>
<div v-else>
  No results found!
</div>
```
InformationsquelleAutor Bill Criswell

HTML - /CSS-Lösung (nur im Falle, wenn Sie immer noch versuchen, es zu beheben nach 2 Jahren)

CSS:

/* all list items are visible */
ul.that-list li { display: block; }

/* ...exept last one*/
ul.that-list li:last-child { display: none; }

/* but if last one is also first one ... means the only one */
ul.that-list li:first-child { display: block; }

HTML:

<h2>List with items</h2>
<ul class="that-list">
  <!-- here is your v-for with any filters you want -->
  <li>1 - Item is here</li>
  <li>2 - Another One Here</li>
  <li>3 - And anothe one</li>
  <!-- this is your message -->
  <li>(!message) There is no items... sorry</li>
</ul>

<h2>Empty</h2>
<ul class="that-list">
  <!-- v-for with no rendered items :c -->
  <li>(!message) There is no items... sorry</li>
</ul>

Auch codepen link hier

InformationsquelleAutor Vladimir Ishenko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Vue 2.x (Update)

Vue 1.x (Original-Antwort)

filterBy

$eval