Фильтр в AngularJS преобразован в VueJS

Question

Я использовал AngularJS в течение долгого времени, и сейчас я переключаюсь на VueJS, но я не могу понять, почему этот простой код Angular не так легко преобразовать в VueJS.

Этополе поиска: <input type="search" ng-model="searchFor.$">

А потом я использую его так:

<ul>
    <li ng-repeat="user in users | filter: search">
        {{ user.email }}
    </li>
</ul>

Этот фильтр очень прост, и поиск в всем вмассив 'users', то есть даже почтовые адреса.

Как я могу легко сделать это в Vue?Не могу понять, только могу найти решения, где вы определяете конкретный столбец, который должен выглядеть.

Answer 1

В этом случае вы должны использовать вычисляемое свойство, которое возвращает отфильтрованный массив.Вычисленный массив будет рекурсивно искать в каждой строке свойства вашего пользователя.

Вот пример

new Vue({
  el: '#app',
  data() {
    return {
      search : '',
      users : [{name : "John Doe", email : "xerox@hotmail.us"}, {name : "Jane Doe"}],
    }
  },
  computed : {
    filteredUsers() {
      if (!this.search) return this.users
      
      var find =  function(object, search) {
        for (var property in object) {
          if (object.hasOwnProperty(property)) {
            if (typeof object[property] == "object"){
              find(object[property]);
            } else if (object[property].includes !== undefined){
              if (object[property].includes(search)) return true;
            }
          }
        }
        return false;
      }
      
      return this.users.filter(user => {
        return find(user, this.search)
      })
    }
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="search" placeholder="Filter users">
  <p v-show="!filteredUsers.length">No results</p>
  <ul>
    <li v-for="user in filteredUsers">{{user.name}}, email : {{user.email || 'N/A'}}</li>
  </ul>
</div>