javascript - Vue avec Uncaught TypeError : todo[i].css n'est pas une fonction

Question

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

Answer 1

todo[i].css('display', 'none'); C'est ainsi que JQuery change le style CSS
Je ne vous vois pas faire référence à JQuery dans le code que vous avez publié

.

Si JQuery n'est pas référencé dans Vue, vous ne pouvez utiliser que du JS natif pour modifier le style CSS

Par exemple :

todo[i].style.display = 'none'

// 或

todo[i].setAttribute('display', 'none')

// 或

todo[i].className = 'newClass'

.newClass {
    display: none;
}

Answer 2

L'idée de vue est de faire fonctionner le DOM le moins possible et de changer la vue uniquement en modifiant au maximum les données si vous souhaitez changer l'affichage des éléments dans l'état correspondant en cliquant sur un bouton, vous pouvez utilisez des propriétés calculées pour filtrer les données correspondantes

Answer 3

Vue fournit une solution pour lier les styles via des données, de sorte que le reste des réponses est inexact.

<template>
  <p
    :style="{ color: demo.color }"
    :class="demo.isActive ? 'active' : ''"
  >
    Demo
  </p>
</template>

<script>
export default {
  data () {
    return {
      demo: { isActive: false, color: 'red' }
    }
  }
}
</script>

Answer 4

Bonne réponse au premier étage, essayez d'adopter un modèle de développement basé sur les données dans les applications Vue pour réduire les opérations DOM. Les données associées dans le DOM sont initialisées à l'avance dans les données ou sont traitées de manière calculée. L'ensemble de la logique métier exploite uniquement les données, atteignant ainsi l'objectif de mise à jour du DOM de manière réactive. Cette erreur causée par l'affiche est évidemment due au fait que vous avez mal défini le CSS. Vérifiez comment modifier le CSS avec js ou jquery.