[Vuejs]-Create a filter category option select with vueJS

by

2👍

You should use v-model on the select field then make sure the text between the matches the name of each category in the objects then you can set you currentFilter value to ALL by default and when you change the option it will update the currentFilter since you used v-model two way binding and you can do some if check before displaying the courses you can check if the course category matches the current filter of if the currentFilter is === to All then you will display all the courses.

    new Vue({
            el: '#app',
            data: {
                currentFilter: 'ALL',
                projects: [
                    {title: 'Web development', image:               './images/camping.jpg', category: 'WEB DEVELOPMENT' },
                    {title: 'WEB UX/UI DESIGN', image: './images/grid1jpg', category: 'Design' },
                    {title: 'Wordpress', image: './images/grid2.jpg', category: 'WORDPRESS DEVELOPMENT' },
                    {title: 'Design', image: './images/health6.jpeg', category: 'FREE COURSE' }
                ]
            },
        })
 <div id="app">
    <h1>Filter the bello list</h1>
    <select tabindex="-1" aria-hidden="true" v-model="currentFilter">
        <option>ALL</option>   
        <option>WEB DEVELOPMENT</option>
        <option>Design</option>
        <option>WORDPRESS DEVELOPMENT</option>
        <option>FREE COURSE</option>
        <option></option>
    </select>
    <h2>List of courses </h2>
    <div>
        <ul v-for="course in projects" v-if="course.category === currentFilter || currentFilter === 'ALL'">
            <li>{{ course.title }}</li>
        </ul>
    </div>
  </div>

That should work just find

👤Awa Donalcien

1👍

Use the v-model property to bind your select to a list of projectTypes then the filter will be automatically updated on change.

MARKUP

<select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" v-model="currentFilter">
    <option  v-for="project in projectTypes" :value="project" :key="project">{{ project }}</option>
</select>

JS*

new Vue({
    el: '#app',
    data: {
        currentFilter: 'ALL',
        projectTypes: [
           'ALL',
           'WEB DEVELOPMENT',
           'Design',
           'WORDPRESS DEVELOPMENT',
           'FREE COURSE'
        ],
        projects: [
            {title: "Web development", image: "https://picsum.photos/g/200?image=116", category: 'WEB DEVELOPMENT'},
            {title: "WEB UX/UI DESIGN", image: "https://picsum.photos/g/200?image=121", category: 'Design'},
            {title: "Wordpress", image: "https://picsum.photos/g/200?image=133", category: 'WORDPRESS DEVELOPMENT'},
            {title: "Design", image: "https://picsum.photos/g/200?image=121", category: 'FREE COURSE'}, 
        ]
    }
})
👤kburlz

Leave a comment