Как отфильтровать все oop на основе нескольких вычисленных свойств в Vue JS

Question

Я создал поисковый фильтр, используя Vue2 JS. Он отлично работает при поиске только заголовка блога. Тем не менее, как мне заставить его отображать результаты, основанные также на местоположении?

Это потому, что вход, используемый поиском, может быть общим поиском по ключевым словам или, по крайней мере, настроен на поиск по title и местоположение et c.

У меня есть;

new Vue({
  el: '#app',
    data() {
        return {
            search:'',
            blogs: [
              { 
                title: 'Northern Towns' ,
                location: 'Leeds'
              },
              { 
                title: 'Things to do in Leeds' ,
                location: 'Yorkshire'
              },
              { 
                title: 'Visit the beach',
                location: 'Cornwall'
              }
            ]
        }
    },
    computed: {
        filteredBlogs:function(){
            return this.blogs.filter((blog) => {
              return blog.title.toLowerCase().match(this.search);
              return blog.location.toLowerCase().match(this.search);
            });
        }
    }
})

Answer 1

Если у вас есть опции, которые указывают, какой тип поиска выбрал пользователь, он может выглядеть следующим образом:

computed: {
        filteredBlogs:function(){
            return this.blogs.filter((blog) => {
               const matchedByTitle = blog.title.toLowerCase().match(this.search)
               const matchedByLocation = blog.location.toLowerCase().match(this.search)
               if (this.searchByTitle) {
                 return matchedByTitle
               }
               if (this.searchByLocation) {
                 return matchedByLocation
               }
               if (this.searchByTitleAndLocation) {
                 return matchedByTitle || matchedByLocation
               }
            });
        }
    }

Answer 2

Пожалуйста, отметьте это, вам просто нужно добавить OR в поиске, чтобы найти место или название.

   const app = new Vue({
        el: '#app',
        data: {
            search: '',
             blogs: [
              { 
                title: 'Northern Towns' ,
                location: 'Leeds'
              },
              { 
                title: 'Things to do in Leeds' ,
                location: 'Yorkshire'
              },
              { 
                title: 'Visit the beach',
                location: 'Cornwall'
              }
            ]
        },
    computed: {
        filteredBlogs:function(){
            return this.blogs.filter((blog) => {
              return blog.title.toLowerCase().match(this.search.toLowerCase()) ||  blog.location.toLowerCase().match(this.search.toLowerCase());
            });
        }
    }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

    <div id="app">
        <label>
            Search name: <input type="text" v-model='searchString'>
        </label> <br>
            <li v-for='item in filteredBlogs' :key='item.id' class="my-list-item">
                {{item.title}}
            </li>
    </div>