javascript - Vue 错误Uncaught TypeError: todo[i].css bukan fungsi

Question

Apabila membuat senarai todolist, klik butang untuk memaparkan senarai todolist yang belum selesai.
Tetapi nilai indeks boleh diperolehi dengan melintasi item dalam tatasusunan, tetapi css tidak boleh diubah

<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>

Maaf, apa yang silap? ?Ikhlas meminta pertolongan

Answer 1

todo[i].css('display', 'none'); Beginilah cara JQuery menukar gaya css
Saya tidak nampak anda merujuk JQuery dalam kod yang anda siarkan

Jika JQuery tidak dirujuk dalam Vue, anda hanya boleh menggunakan JS asli untuk mengubah suai gaya css

Contohnya:

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

// 或

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

// 或

todo[i].className = 'newClass'

.newClass {
    display: none;
}

Answer 2

Idea vue adalah untuk mengendalikan DOM sesedikit mungkin dan menukar paparan hanya dengan menukar data sebanyak mungkin jika anda ingin menukar paparan item dalam keadaan yang sepadan apabila mengklik butang, anda boleh gunakan sifat terkira untuk menapis data yang sepadan

Answer 3

Vue menyediakan penyelesaian untuk mengikat gaya melalui data, jadi jawapan selebihnya adalah tidak tepat.

<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

Jawapan betul di tingkat satu, cuba pakai model pembangunan dipacu data dalam aplikasi Vue untuk mengurangkan operasi DOM. Data yang berkaitan dalam DOM dimulakan terlebih dahulu dalam data, atau diproses dalam pengiraan Keseluruhan logik perniagaan hanya mengendalikan data, dengan itu mencapai tujuan mengemas kini DOM secara responsif. Ralat yang disebabkan oleh poster ini jelas kerana anda menetapkan css dengan cara yang salah Semak cara menukar css dengan js atau jquery.