Lorsque vous créez une liste de tâches, cliquez sur un bouton pour afficher la liste de tâches inachevée. L'idée est de cliquer sur la méthode du bouton pour parcourir tous les éléments et de masquer les éléments terminés pour afficher tous les éléments inachevés.
Mais la valeur de l'index peut être obtenue en parcourant l'élément dans le tableau, mais le CSS ne peut pas être modifié

<template>
  <p id="app" >
    <h1>{{title}}</h1>
    <input v-model='newItem' placeholder='Add your todolist' class='inputItem' v-on:keyup.enter='addNew'>
    <p class="nav">
      <img src="./assets/all.png">
      <img src="./assets/checkBox.png" @click='showUndo(item)'>
      <img src="./assets/checkBoxF.png" @click='showDone(item)'>
      <img src="./assets/delete.png" @click='deleteAll(item)'>
    </p>
    <ul>
      <li v-for='(item,index) in items' :index="index" class='todo-line'  >
        <p class='view'  @mouseenter='itemEnter(item)' @mouseleave='itemLeave(item)'>
          <span class="checkBox" 
          v-on:click='toggleFinish(item)' v-bind:class='{checked:item.isFinish}'></span>
          <label class='item-label' v-bind:class='{finished:item.isFinish}'>{{ index + 1}} . {{item.label}}</label>
          <img class="item-delete" src="./assets/delete1.png"  v-if='item.showDelete'  @click='deleteTodo(item)' >
        </p>        
      </li>
    </ul>
  </p>
</template>

<script>
import Store from './store'
export default {
  data: function () {
    return {
      item :'',
      title: 'todolist',  
      items: Store.fetch(),
      newItem: ''
    }
  },
   watch: {
    items: {
        handler: function (items) {
        Store.save(items)
      },
      deep: true
    }
  },
  methods: {
      toggleFinish(item) {
      item.isFinish = !item.isFinish
    },
    addNew: function () {
      this.items.push({
        label: this.newItem,
        isFinish: false,
        showDelete:false,
      })
      this.newItem = ''
    },
    itemEnter(item){
      item.showDelete = true
    },
    itemLeave(item){
      item.showDelete = false
    },
    deleteTodo(index){     
      this.items.splice(index,1)
    },
    deleteAll(item){
      this.items.splice(item)
    },
    showUndo(){
      var todo = this.items;
      for (var i = 0;i < todo.length; i++) {
        if (todo[i].isFinish == true) {
          todo[i].css('display', 'none');
          console.log(i)
        }
      }   
    },
  }
}
</script>

Excusez-moi, qu'est-ce qui ne va pas ? ?Je demande sincèrement de l'aide