使用Vue和复选框过滤列表？
使用Vue和复选框过滤列表？
提问于 2018-10-25 08:53:33
我正在尝试使用复选框中的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进行过滤。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-25 08:59:41
您的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52994451
复制相关文章
相似问题
腾讯云开发者
