Vue中如何點擊獲取當前元素下標

更新時間：2023年05月18日 10:26:50 作者：PromiseKeeping

這篇文章主要介紹了Vue中如何點擊獲取當前元素下標問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue點擊獲取當前元素下標

項目開發(fā)中，固定列表是很常見的，有時候我們需要得到元素的下標去做一些事情，但是少了v-for想要獲取下標就比較困難了

下面我便介紹我的方法

其實我用的方法很簡單，就是用事件委托機制去獲取事件發(fā)生的元素，再獲取父元素的子元素集合，再遍歷子元素集合，當事件發(fā)生元素等于子元素集合中的某一個時，返回數(shù)組下標，即可得到事件發(fā)生元素的下標。

<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;//事件發(fā)生的元素
? ? ? ? ? ? let nodeList=e.target.parentNode.children;//同級元素集合
? ? ? ? ? ? let targetIndex=_this.tabIndex(target,nodeList);//調(diào)用tabIndex方法，返回值便是元素下標
? ? ? ? ? ? console.log(targetIndex)//打印當前點擊元素的下標
? ? ? ? ? })
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? /**
? ? ? ? ? ?*
? ? ? ? ? ?* @param target 事件觸發(fā)的元素
? ? ? ? ? ?* @param nodeList 元素集合
? ? ? ? ? ?* @returns {number} 返回事件觸發(fā)元素的下標
? ? ? ? ? ?*/
? ? ? ? ? tabIndex(target,nodeList){
? ? ? ? ? ? for(let i=0;i<nodeList.length;i++){
? ? ? ? ? ? ? if(target===nodeList[i]){
? ? ? ? ? ? ? ? return i;
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? }
</script>
<style scoped>
</style>

vue數(shù)組獲取下標的坑

使用Vue 編寫了基礎(chǔ)的添加刪除功能遇到了一個小坑

<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="創(chuàng)建" 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>

刪除功能遇到點小坑，每次點擊刪除都會刪除第一條內(nèi)容

后來發(fā)現(xiàn)在下面代碼處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("當前對象的內(nèi)容："+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>