vue中提示$index is not defined錯誤的解決方式
今天學習Vue中遇到了一個報錯信息:$index is not defined,是我寫了個for循環(huán)在HTML中,然后是因為版本的問題
下面是解決方法:
原來的是 v-for="person in items"
v-on:click="deletePerson($index)"http://這個僅僅適用于1.0版本,不要采坑了同學們
這個在Vue1.0版本中式適用的可以直接使用$index,但是在2.0是不適合的
在Vue 2.0版本中獲取索引我們需要通過 v-for = "(person ,index) in items ", 點擊事件我們也不能使用$index,應該使用
v-on:click="deletePerson(index)"
補充知識:vue中滾動頁面,改變樣式&&導航欄滾動時,樣式透明度修改
.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
}
}
以上這篇vue中提示$index is not defined錯誤的解決方式就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3 Pinia獲取全局狀態(tài)變量的實現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法
Vue.js是一個流行的JavaScript框架,它可以幫助開發(fā)者構建交互式Web應用程序,這篇文章主要給大家介紹了關于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法,需要的朋友可以參考下2023-12-12
Vue3表單組件el-form校驗規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗是非常重要的,rules使用不當容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關于Vue3表單組件el-form校驗規(guī)則rules屬性的相關資料,需要的朋友可以參考下2024-08-08
Vue自定義指令實現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實現(xiàn)checkbox全選功能的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
基于Element封裝一個表格組件tableList的使用方法
這篇文章主要介紹了基于Element封裝一個表格組件tableList的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06

