我如何让按钮隐藏未完成的任务答案

【问题标题】：How would I make the button hide the incomplete tasks我如何让按钮隐藏未完成的任务
【发布时间】：2021-12-19 18:25:00
【问题描述】：

这是 Jsfiddle：https://jsfiddle.net/zxo35mts/1/

基本上我试图让按钮在单击时隐藏所有未完成的任务，并在再次单击时再次显示它们但我不知道该怎么做

<div id="root">

    <h1>
        All Tasks
    </h1>

    <ul>
        <li v-for="task in tasks" v-text="task.description"></li>
    </ul>
    <button @click="hideIncompleteTasks">show only completed</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
    new Vue({

        el: "#root",

        data: {

            tasks: [

                { description: "go to the store", completed: true },
                { description: "finish screencast", completed: false },
                { description: "make donation", completed: false },
                { description: "clear inbox", completed: false },
                { description: "make dinner ", completed: false },
                { description: "clean room", completed: true },

            ]

        },
        methods: {

            hideIncompleteTasks() {
                if (!this.tasks.completed) {

                }
            }

        },

    })
</script>

【问题讨论】：

标签： vue.js vuejs2 vue-component v-for

【解决方案1】：

一种方式：

new Vue({
  el: "#root",
  data: {
      tasks: [
          { description: "go to the store", completed: true },
          { description: "finish screencast", completed: false },
          { description: "make donation", completed: false },
          { description: "clear inbox", completed: false },
          { description: "make dinner ", completed: false },
          { description: "clean room", completed: true },
      ],
      onlyCompleted: false
  },
  methods: {
    hideIncompleteTasks() {
      this.onlyCompleted = !this.onlyCompleted
    }
  },
})

.hiden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
      <h1>
          All Tasks
      </h1>
      <ul>
          <li v-for="task in tasks" v-text="task.description" :class="onlyCompleted && !task.completed && 'hiden' "></li>
      </ul>
      <button @click="hideIncompleteTasks">show only completed</button>

  </div>

【讨论】：

【解决方案2】：

添加另一个名为 showCompleted 的属性，该属性可以通过按钮单击事件进行更新，然后基于第一个属性添加另一个名为 shownTasks 的计算属性：


    new Vue({

        el: "#root",

        data: {

            tasks: [

                { description: "go to the store", completed: true },
                { description: "finish screencast", completed: false },
                { description: "make donation", completed: false },
                { description: "clear inbox", completed: false },
                { description: "make dinner ", completed: false },
                { description: "clean room", completed: true },

            ],
          showCompleted:false

        },
        computed:{
          shownTasks(){ return this.showCompleted?this.tasks.filter(task=>task.completed):this.tasks;}
        },
        methods: {

            hideIncompleteTasks() {
               this.showCompleted=!this.showCompleted
            }

        },

    })

然后像这样渲染shownTasks：


 <ul>
        <li v-for="task in shownTasks" v-text="task.description"></li>
    </ul>
    <button @click="hideIncompleteTasks">show only completed</button>

【讨论】：

如果您不介意，您能解释一下您所做的更改是如何工作的吗？所以我可以理解，而不仅仅是复制你
你不明白什么？
为什么我们需要一个“showCompleted”属性？还有什么是“计算：{}”
showCompleted 是一个属性，我们可以使用点击事件来切换它，我们用它来只显示已完成的任务，computed 是一个选项，用于根据其他的变化返回数据属性