Movie Filter using JQuery and Vue.js

I'm trying to make a JavaScript filter that will sort movies, similar to the set up that you might see on amazon.com and so forth.

Using php/Laravel on the back end, I'm generating a series of div's that each contain a movie. When the user clicks a checkbox (for example, with a movie genre), all movies that are not of that selected genre will removed.

I'm using this as a project to teach myself laravel, jquery, and vue.js, but the front end JavaScript work has me stumped and I could really use some help. Thanks in advance.

Html/Php for checkboxes:

                                        @foreach( $genres as $genre )
                                            <label class="form-check"> 
                                                <input class="form-check-input" id="genre" value="" type="checkbox" v-model="checked" @click="genreSearch()">
                                                <span class="form-check-label"></span>
                                            </label>
                                        @endforeach 
                                        <span>You've Checked: @ </span>

Html/Php for Movies

                 @foreach ($movies as $movie)           
                    <div class="card mb-2 " id="">
                        <div class="row no-gutters">
                            <div class="col-auto">
                                <a href="/movies/"><img src="" class="img-fluid" width="300px" height="100px" style="height: 400px;"></a>
                            </div>
                            <div class="col">
                                <div class="card-block px-2">
                                    <h5 class="card-title mb-0"><strong></strong></h5>
                                    @php $rating = $movie->rating->avg('rating'); @endphp

                                    @foreach(range( 1,5 ) as $i )
                                        <span class="fa-stack" style="width: 1em;">
                                            <i class="far fa-star fa-stack-1x"></i>
                                            @if( $rating > 0 )
                                                @if( $rating > 0.5 )
                                                    <i class="fa fa-star starred fa-stack-1x"></i>
                                                @else
                                                    <i class="fa fa-star-half fa-stack-1x"></i>
                                                @endif
                                            @endif
                                            @php $rating--; @endphp
                                        </span>
                                    @endforeach
                                    <h6 class="card-subtitle mt-2 mb-2 text-muted">By: </h6>
                                    <h6 class="card-subtitle mb-2 text-muted">Released: </h6>
                                    <p></p>
                                    <div class="row ml-0">
                                        <a href="/movies/" class="badge badge-primary pt-2 pb-2 px-3 mr-2">Details</a>
                                        <a href="/movies//ratings" class="badge badge-primary pt-2 pb-2 px-1 mr-2">Ratings &nbsp
                                            <span class="badge-light px-1"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

JavaScript:

<script>    
    var genreFilter = new Vue({
        el: '#genres',
        data: {
            checked: []
        },
        methods: {
            genreSearch: function () {
                $( "#Fantasy" ).toggle(function() {
                    alert( "First handler for .toggle() called." );
                }, function() {
                    alert( "Second Handler for toggle().called." );
                });

            }
        }
    });
</script>

from Newest questions tagged laravel-5 - Stack Overflow http://bit.ly/2GSmChz
via IFTTT