使用Vue和复选框过滤列表？

Question

我正在尝试使用复选框中的userId筛选帖子列表。 我正在从以下网址提取数据： https : //jsonplaceholder.typicode.com/posts ，然后想要添加复选框，当选中该复选框时，将通过userId过滤列表。 这是我目前拥有的：

 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> 

我很困惑为什么当我单击一个复选框时整个列表会消失而不是按userId进行过滤

Answer 1

您的userIds: ['1', '2', '3'],是不是整数的字符串数组。 尝试userIds: [1, 2, 3],

json文件的userId为整数。 类型必须相同才能使此功能起作用。

 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>