My current challenge involves filtering a list of posts based on userId using checkboxes. The data is being retrieved from: https://jsonplaceholder.typicode.com/posts. I aim to include checkboxes that, when selected, will filter the list by userId. Here is my current setup:
var app = new Vue({
el: '#app',
data() {
return {
jobs: [],
userIds: ['1', '2', '3'],
checkedUserIds: []
}
},
created() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(response => (this.jobs = response.data))
},
computed: {
filteredJobs() {
if (!this.checkedUserIds.length)
return this.jobs
return this.jobs.filter(job => this.checkedUserIds.includes(job.userId))
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="userId in userIds">
<input type="checkbox" v-model="checkedUserIds" v-bind:value="userId" /> {{userId}}
</div>
<div v-for="job in filteredJobs">
<h2>{{ job.title }}</h2>
<div>{{ job.body }}</div>
</div>
</div>I am puzzled as to why clicking a checkbox causes the entire list to disappear instead of filtering it by the userId.