Solution of $index is not defined Error Prompt in vue

  • 2021-08-10 06:34:09
  • OfStack

Today, I encountered an error message in learning Vue: $index is not defined, I wrote an for loop in HTML, and then because of the version problem

Here are the solutions:

The original is v-for= "person in items"

v-on: click= "deletePerson ($index)"//This is only applicable to version 1.0, so don't pinch the students

This is applicable in Vue version 1.0 and can be used directly with $index, but it is not suitable in 2.0

In Vue version 2.0, we need to get the index through v-for = "(person, index) in items", and we can't use $index for click events, we should use

v-on:click="deletePerson(index)"

Additional knowledge: Scroll pages and change styles in vue & & When the navigation bar scrolls, the style transparency is modified

.vue

< div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }" >

< img src="@/images/home/icon_jdjr.png" v-bind:class="{ 'scrollFlag': scrollFlag }" >

data

scrollFlag:false,

mounted

window.addEventListener('scroll', this.handleScroll)

methods


handleScroll () {
 let _this=this;
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 // console.log(scrollTop)
 if(scrollTop){
  _this.scrollFlag=true
 }else{
  _this.scrollFlag=false
 }
}

Related articles: