javascript - Vue 錯誤Uncaught TypeError: todo[i].css is not a function

Question

在做一個todolist,有個按鈕點擊顯示沒有完成的todolist,思路是點擊按鈕方法遍歷整個items，完成的item隱藏來達到顯示全部未完成的item。
可是陣列遍歷item可以取到index值，但是無法改變css

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

請問是哪裡出錯了嗎？ ?真心求助

Answer 1

todo[i].css('display', 'none'); 這是JQuery改變css樣式的方法呀
貼出來的程式碼中也沒看到你有引用JQuery

Vue中如果沒有引用JQuery，只能用原生JS來修改css樣式

如：

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

// 或

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

// 或

todo[i].className = 'newClass'

.newClass {
    display: none;
}

Answer 2

vue的想法是盡量少操作DOM，盡可能的只透過改變資料來改變視圖；如果想實現點擊按鈕時切換顯示對應狀態的item，可以用計算屬性來篩選出對應的資料

Answer 3

Vue 提供了透過資料綁定樣式的方案，因此其餘回答都是不準確的。

<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

一樓正解，vue應用中盡量採用數據驅動的開發模式，減少dom的操作。在DOM中關聯的數據在data中提前初始化，或是在computed中有個處理，整個業務邏輯中僅僅是操作數據，從而達到響應式更新dom的目的。樓主出現的這個錯誤很明顯是你的設定css的方式錯了，去查查js或jquery如何更改css。