最后一節聽的好迷糊，有沒有大佬有總結的筆記或者代碼可以看一看?。?/h1>
求助，已完成的數量和清除已完成這部分，已經蒙了。
求助，已完成的數量和清除已完成這部分，已經蒙了。
最后一節聽的好迷糊，有沒有大佬有總結的筆記或者代碼可以看一看?。?/h1>
7513179
2021-10-21
1 回答
舉報
0/150
提交
取消
2022-04-25
這個是footer里的代碼。我跑了是沒有問題的，不知道你是哪里有問題??？
<template>
<div class="container">
<div>completed{{ isComplete }} / total {{ list.length }}</div>
<div v-if="isComplete > 0" class="btn">
<button @click="clear">clear completed</button>
</div>
</div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
export default defineComponent({
name: "navFooter",
props: {
//父組件從vuex中，拿出list的數據
//然后傳給子組件，子組件就展示
list: { type: Array, required: true },
},
setup(props, ctx) {
//過濾已完成
let isComplete = computed(() => {
let arr = props.list.filter((item) => {
return item.complete;
});
return arr.length;
});
// let all = ref(3);
let clear = () => {
//過濾未完成,
let arr = props.list.filter((item) => {
return item.complete === false;
});
ctx.emit("clear", arr);
// console.log("clear");
};
return {
isComplete,
// all,
clear,
};
},
});
</script>
<style lang="scss" scoped>
.container {
display: flex;
align-content: center;
}
.btn {
margin-left: 10px;
}
</style>