search

Home  >  Q&A  >  body text

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

When making a todolist, click a button to display the unfinished todolist. The idea is to click the button method to traverse the entire items, and hide the completed items to display all unfinished items.
But the index value can be obtained by traversing the item in the array, but the css cannot be changed

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

Excuse me, what went wrong? ?Sincerely asking for help

仅有的幸福仅有的幸福2741 days ago1260

reply all(4)I'll reply

  • 淡淡烟草味

    淡淡烟草味2017-07-05 11:10:46

    todo[i].css('display', 'none'); This is how JQuery changes the css style.
    I don’t see you referencing JQuery in the code you posted

    If JQuery is not referenced in Vue, you can only use native JS to modify the css style

    For example:

    todo[i].style.display = 'none'
    
    // 或
    
    todo[i].setAttribute('display', 'none')
    
    // 或
    
    todo[i].className = 'newClass'
    
    .newClass {
        display: none;
    }
    

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-07-05 11:10:46

    The idea of ​​vue is to operate the DOM as little as possible and change the view only by changing the data as much as possible; if you want to switch the display of items in the corresponding state when clicking a button, you can use calculated properties to filter out the corresponding data

    reply
    0
  • 为情所困

    为情所困2017-07-05 11:10:46

    Vue provides a solution to bind styles through data, so the rest of the answers are inaccurate.

    <template>
      <p
        :style="{ color: demo.color }"
        :class="demo.isActive ? 'active' : ''"
      >
        Demo
      </p>
    </template>
    
    <script>
    export default {
      data () {
        return {
          demo: { isActive: false, color: 'red' }
        }
      }
    }
    </script>

    reply
    0
  • 学习ing

    学习ing2017-07-05 11:10:46

    Correct answer on the first floor, try to adopt a data-driven development model in Vue applications to reduce DOM operations. The associated data in the DOM is initialized in advance in data, or is processed in computed. The entire business logic only operates data, thereby achieving the purpose of updating the DOM responsively. This error caused by the poster is obviously the way you set up the css is wrong. Go check how to change the css with js or jquery.

    reply
    0
  • Cancelreply