1回答

• 

  慕码人9569374

  2022-04-25 16:24:55

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

  
  

  0 1