使用 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>