Vue中如何点击获取当前元素下标
作者：PromiseKeeping
这篇文章主要介绍了Vue中如何点击获取当前元素下标问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue点击获取当前元素下标
项目开发中，固定列表是很常见的，有时候我们需要得到元素的下标去做一些事情，但是少了v-for想要获取下标就比较困难了
下面我便介绍我的方法
其实我用的方法很简单，就是用事件委托机制去获取事件发生的元素，再获取父元素的子元素集合，再遍历子元素集合，当事件发生元素等于子元素集合中的某一个时，返回数组下标，即可得到事件发生元素的下标。
<template>
<div class="footer-tab">
<div class="tab-item">home</div>
<div class="tab-item">second</div>
<div class="tab-item">third</div>
</div>
</template>
<script>
export default {
name: 'commonFooter',
data() {
return {}
},
created() {
},
mounted(){
let _this=this;
//事件委托
document.querySelector(".footer-tab").addEventListener("click",function(e){
let target=e.target;//事件发生的元素
let nodeList=e.target.parentNode.children;//同级元素集合
let targetIndex=_this.tabIndex(target,nodeList);//调用tabIndex方法，返回值便是元素下标
console.log(targetIndex)//打印当前点击元素的下标
})
},
methods: {
/**
*
* @param target 事件触发的元素
* @param nodeList 元素集合
* @returns {number} 返回事件触发元素的下标
*/
tabIndex(target,nodeList){
for(let i=0;i<nodeList.length;i++){
if(target===nodeList[i]){
return i;
}
}
}
}
}
</script>
<style scoped>
</style>vue数组获取下标的坑
使用Vue 编写了基础的添加删除功能遇到了一个小坑
<div id="app">
<fieldset>
<legend>
Create New Person
</legend>
<div>
<label>姓名:</label>
<input v-model="new_person.name">
</div>
<div>
<label>年龄:</label>
<input v-model="new_person.age">
</div>
<div>
<label>性别:</label>
<select v-model="new_person.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div id="">
<input type="button" name="" id="" value="创建" v-on:click="Create_person" />
</div>
</fieldset>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td><button @click="Delete_person(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>Vue代码
<script>
var vm = new Vue({
el: "#app",
data: {
new_person: {
name: '',
age: 0,
sex: '男',
},
people: [{
name: '1',
age: 0,
sex: '',
},
{
name: '2',
age: 0,
sex: '',
},
{
name: '3',
age: 0,
sex: '',
}
],
},
methods: {
Create_person: function() {
this.people.push(this.new_person)
this.new_person = {
name: '',
age: 0,
sex: '男',
}
},
Delete_person: function(index) {
this.people.splice(index, 1);
console.log(index)
}
}
})
</script>删除功能遇到点小坑，每次点击删除都会删除第一条内容
后来发现在下面代码处index并未获取还并未报错
<td><button @click="Delete_person(index)">删除</button></td>
// Vue 代码
Delete_person: function(index) {
this.people.splice(index, 1); //splice 命令如果传入下标将默认删除第一条
console.log(index)
}
}由此从以下代码中查找到获取下标的方法
<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>
data里面声明：
data() {
return {
tabList: [
{ id: 0, title: "首页1" },
{ id: 1, title: "首页2" },
{ id: 2, title: "首页3" }
],
current:0
};
},
methods: {
addClass: function(index,event) {
this.current = index;
//获取点击对象
var el = event.currentTarget;
console.log("当前对象的内容："+el.innerHTML);
console.log(this.current)然后修改代码
<tbody>
<tr v-for="(person,index) in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td><button @click="Delete_person(index)">删除</button></td>
</tr>
</tbody>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。