快捷導(dǎo)航

Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)

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

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

vue點(diǎn)擊獲取當(dāng)前元素下標(biāo)

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

下面我便介紹我的方法

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

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

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

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

<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>

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

后來發(fā)現(xiàn)在下面代碼處index并未獲取還并未報(bào)錯(cuò)

<td><button @click="Delete_person(index)">刪除</button></td>

// Vue 代碼
	Delete_person: function(index) {
					this.people.splice(index, 1); //splice 命令如果傳入下標(biāo)將默認(rèn)刪除第一條
					console.log(index)
				}
			}

由此從以下代碼中查找到獲取下標(biāo)的方法

<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;
      //獲取點(diǎn)擊對象      
      var el = event.currentTarget;
      console.log("當(dāng)前對象的內(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>