CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Al-76
Al-76

Reputation: 1878

How do I filter a loop based on multiple computed properties in Vue JS

I have created a search filter using Vue2 JS. It works fine when searching for just the title of a blog. However, how do I get it to show results based on the location as well?

This is because the input used by the search may be a general keyword search or at least set to search against title and location etc.

I have;

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);
            });
        }
    }
})

Upvotes: 0

Views: 203

Answers (2)

Anatoly
Anatoly

Reputation: 22768

If you have options that are indicating what type of a search a user selected then it could look like:

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
               }
            });
        }
    }

Upvotes: 1

Abdul Basit
Abdul Basit

Reputation: 1382

Please check this, you just need to add OR in searching whether to search location or title. 

   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>

Upvotes: 1

Related Questions