v-for循环el-button默认选中第一个button按钮,执行第一个按钮的事件

需求: v-for遍历一组按钮，要做到一进入页面高亮就在第一个按钮上面，且执行第一个按钮的方法

<template>
	<el-button
		v-for="(item,index) in upList"
		:key="index"
		size="small"
		:class="{ active: index == upBtn }"
		style="margin-bottom:10px"
		@click="handle(item,index)"
	>{{item.name}}</el-button>
</template>

data中定义upBtn

data(){
	return{
		// 用于按钮高亮设置
		upBtn: 0,
	}
}

实现一进入页面就执行第一个按钮：

watch: {
	upList: {
		handler(newVal,oldVal){
			this.handler(newVal[0],0)
		}
	}
}

按钮方法

methods: {
	handle(row,index){
		// 
		this.upBtn = index
		...
	}
}

按钮高亮展示

<style scoped>
.active {
	color: #1890ff;
	border-color: #badeff;
	background-color:#e8f4ff
}
</style>