<template>
 <div>
  <el-card>
   <ul class="list-style-none title-list">
    <li v-for="item in titleList" v-bind:class="{'active':item.active}" @click="activeItem(item)">{{item.name}}</li>
   </ul>
  </el-card>
 
 </div>
</template>
 
<script>
 export default {
  name: "approval-list",
  data() {
   return {
    titleList: [
     {id: 1, name: 'Property', active: true},
     {id: 2, name: 'Tower'},
     {id: 3, name: 'Unit'},
     {id: 4, name: 'Listing'},
     {id: 5, name: 'Agent'},
    ],
   }
  }, methods: {
   activeItem(_item){
    this.titleList.forEach(item=>{
     item.active=false;
    });
    _item.active = true;
    console.log(this.titleList);
    this.$forceUpdate();
   }
  }
 }
</script>
 
<style scoped>
 ul.title-list {
  display: flex;
 
 }
 
 ul.title-list > li {
  padding: 20px 0px;
  margin: 0px 20px;
 }
 
 .active {
  border-bottom: 2px solid #FF0000;
  color: #FF0000;
 }
</style>