vue中提示$index is not defined錯(cuò)誤的解決方式
今天學(xué)習(xí)Vue中遇到了一個(gè)報(bào)錯(cuò)信息：$index is not defined，是我寫了個(gè)for循環(huán)在HTML中，然后是因?yàn)榘姹镜膯栴}
下面是解決方法：
原來(lái)的是 v-for="person in items"
v-on:click="deletePerson($index)"http://這個(gè)僅僅適用于1.0版本，不要采坑了同學(xué)們
這個(gè)在Vue1.0版本中式適用的可以直接使用$index，但是在2.0是不適合的
在Vue 2.0版本中獲取索引我們需要通過(guò) v-for = "(person ,index) in items ", 點(diǎn)擊事件我們也不能使用$index，應(yīng)該使用
v-on:click="deletePerson(index)"
補(bǔ)充知識(shí)：vue中滾動(dòng)頁(yè)面，改變樣式&&導(dǎo)航欄滾動(dòng)時(shí)，樣式透明度修改
.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錯(cuò)誤的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個(gè)使用?Vue.js?開發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡(jiǎn)單案例,需要的朋友可以參考下2023-03-03
vue后臺(tái)返回base64圖片無(wú)法顯示的解決
這篇文章主要介紹了vue后臺(tái)返回base64圖片無(wú)法顯示的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3 中使用vue?img?cutter?圖片裁剪插件的方法
這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下2024-05-05
最近接觸了一個(gè)項(xiàng)目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細(xì)的來(lái)介紹一下，感興趣的可以了解一下2021-09-09
Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關(guān)于Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
通常我們?cè)趘ue項(xiàng)目中都是前端配置好路由的,但在一些項(xiàng)目中我們可能會(huì)遇到權(quán)限控制,這樣我們就涉及到動(dòng)態(tài)路由的設(shè)置了,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄的相關(guān)資料,需要的朋友可以參考下2022-02-02
watch 是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問知識(shí)點(diǎn)，一般會(huì)用作和 computed 進(jìn)行比較。那么本文就來(lái)帶大家從源碼理解 watch 的工作流程，以及依賴收集和深度監(jiān)聽的實(shí)現(xiàn)2022-10-10
vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比
這篇文章主要給大家介紹了關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue?filters和directives訪問this的問題詳解
這篇文章主要介紹了vue?filters和directives訪問this的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01