This marks the beginning of my VueJS project, as I transition from jQuery. My main goal is to filter a grid using multiple checkboxes. In the JavaScript code provided, there is a filterJobs function that filters an array based on the values checked (v-model="checkedLocations"). It seems like the array.includes method only filters on a single value, but I want to be able to filter on multiple values without modifying the original array. If a user unchecks a location, I don't want it to disappear completely and not rebind.
let careers = careers || {};
careers.taleo = (function($){
let app;
let init = function() {
app = new Vue({
el: '#app',
data: {
locations: ['Scottsdale, AZ','Chandler, AZ','Irvine, CA','Denver, CO','Chicago, IL','Rockville, MD','Kansas City, MO','Charlotte, NC','Red Bank, NJ','Henderson, NV','Melville, NY','Allentown, PA','Irving, TX'],
jobs: null,
checkedLocations: []
},
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
this.jobs = [
{ id: '1', title: 'Circuit Court Clerk', description: 'lorem ipsum', location: 'Charlotte, NC', department: 'Sales and Marketing', date: '23/10/17' },
// Add more job entries
];
},
filterJobs: function(event) {
app.jobs = app.jobs.filter(function (job) {
return job.location.includes(app.checkedLocations);
});
}
}
});
};
return { init, app };
})();
(function(){
careers.taleo.init();
})();