鍍金池/ 問答/HTML/ vue2怎么拿到對應(yīng)下標(biāo)index的元素

vue2怎么拿到對應(yīng)下標(biāo)index的元素

<ul class="left_ul_1">
    <li class="left_li_1" v-for="(item,index) in plotList" :key='item.id' @click="plotClick(item.id,index)">{{item.name}}
      <i class="aui-iconfont aui-icon-right"></i>
    </li>
</ul>
plotClick: function(id,index) { 
           alert(index)

當(dāng)我點擊每一個li的時候，我已經(jīng)拿到了每一個li的下標(biāo)，請問怎么獲取下標(biāo)對應(yīng)的li，進行其他的操作呢。除了用$event

回答
編輯回答
傻丟丟

vue中沒必要獲取dom元素，直接改變數(shù)據(jù)就可以了

2017年11月9日 00:52
編輯回答
氕氘氚

想改變 classname 不需要操作dom 綁定 :class 就好了， 弄一個對應(yīng)的屬性來控制 li 的class的添加和移除
例如

<ul class="left_ul_1">
    <li class="left_li_1" :class="{'active': current === index }" ref="li" v-for="(item,index) in plotList" :key='item.id' @click="plotClick(item.id,index)">{{item.name}}
      <i class="aui-iconfont aui-icon-right"></i>
    </li>
</ul>

// data 
data(){
    return{
        current: null
    }
},
///====
plotClick: function(id,index) { 
    this.current = index; 
}
2017年1月17日 14:37
編輯回答
冷眸

沒有必要去拿li,然后操作dom,直接操作數(shù)據(jù)就行了。你如果想操作css,class這些，直接在你的數(shù)據(jù)里面寫相應(yīng)的class就行了,如果useclass true就用class a ,否則b。

<li class="left_li_1" :class="[item.useclass? 'a':'b']" v-for="(item,index) in plotList" :key='item.id' @click="plotClick(item.id,index)">{{item.name}}
      <i class="aui-iconfont aui-icon-right"></i>
    </li>
2017年4月17日 01:36
編輯回答
枕頭人
<ul class="left_ul_1">
    <li class="left_li_1" ref="li" v-for="(item,index) in plotList" :key='item.id' @click="plotClick(item.id,index)">{{item.name}}
      <i class="aui-iconfont aui-icon-right"></i>
    </li>
</ul>
plotClick: function(id,index) { 
    console.log(this.$refs.li[index])
2017年12月10日 12:29