list.value.map

自己回答。

是 input type=checkbox 使用用v-model达到效果，不是input type=text，想岔了

当业务逻辑多的时候，需要引入七八个组件，统一在父组件那个页面写比较好管理呀，方便维护

没事了，知道了

localStorage或者sessionStorage，tips:字符串格式

没有return 出 del

这个是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>

页面没有更新，要去看标签中数据源是不是父组件传递过来的，我也出现你描述的错误，发现用了当前页面的list，如图，注释掉就可以了。你的错误估计类似

同一个组件中 emit 超过一个会报黄 

在这里

是的, 子组件不能直接修改props传过来的值, 老师有讲过, 但是可以被动的更新值

所以需要通过emit向父子间传值的方式, 达成修改父组件变量的目的!😀