Filtering a List Using Vue and Checkboxes?

Question

I am trying to filter a list of posts using the userId in checkboxes. I am pulling the data from: https://jsonplaceholder.typicode.com/posts and want to then add checkboxes that when checked filter the list by userId. This is what I have currently:

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 stumped on why when I click a checkbox the whole list disappears instead of filtering by the userId

Bert · Accepted Answer · 2018-10-25 17:06:33Z

3

Your userIds: ['1', '2', '3'], is an array of strings not integers. Try userIds: [1, 2, 3],

The json file has userId as integers. Types to need to be the same for this function to work.

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>

edited Oct 25, 2018 at 17:06

Bert

82.6k17 gold badges205 silver badges166 bronze badges

answered Oct 25, 2018 at 16:59

Trevor V

2,1611 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9664977 Over a year ago

Such I stupid mistake on my part... Thank you for the help!

Trevor V Over a year ago

@user9664977 Not a problem. Programming languages are becoming more type strict (which is good for less runtime errors)

Collectives™ on Stack Overflow

Filtering a List Using Vue and Checkboxes?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related