有这么一个小项目：codesandbox
帖子列表并选择过滤器。
家.vue：
<b-form-select v-model="selected" :options="options"></b-form-select>
<ul v-for="post in getPostsFilter" :key="post.id">
<li>
{{ post.id }}
{{ post.completed }}
<b-form-checkbox v-model="post.completed">
I accept the terms and use
</b-form-checkbox>
{{ post.title }}
</li>
</ul>
import { mapActions, mapGetters } from "vuex";
export default {
name: "Home",
components: {
DefaultLayout,
},
data() {
return {
selected: this.$store.state.selected,
options: [
{
value: "all",
text: "All",
},
{
value: "completed",
text: "Completed",
},
{
value: "not_completed",
text: "Not completed",
},
],
};
},
computed: {
...mapGetters(["getPostsFilter"]),
},
methods: {
...mapActions(["fetchPosts"]),
},
mounted() {
this.fetchPosts();
},
};
</script>
商店.js：
export default new Vuex.Store({
state: {
posts: [],
selected: "all"
},
getters: {
getPosts(state) {
return state.posts;
},
getPostsFilter(state) {
if (state.selected === "all") {
return state.posts;
}
if (state.selected === "completed") {
return state.posts.filter((p) => (p = p.completed));
}
if (state.selected === "not_completed") {
return state.posts.filter((p) => (p = !p.completed));
}
}
},
mutations: {
setPosts(state, payload) {
state.posts = payload;
}
},
actions: {
async fetchPosts({ commit, dispatch }) {
axios
.get(" https://jsonplaceholder.typicode.com/todos/?_limit=3")
.then((response) => {
this.commit("setPosts", response.data);
})
.catch((err) => {
console.log(err);
});
}
}
});
问题：在 select completed\not_completed\all 中选择时如何显示过滤列表？
