Vue data数组命名获取

Question

例子：
html部分

                       <tr v-for="(item,index) in tabTh">
                            <td><input type="checkbox" id="all_choose" /><label for="all_choose" :class="'label_all '+thChoose"><span></span></label></td>
                            <td v-html="item.ListNumber"></td>
                            <td v-html="item.State"></td>
                            <td v-html="item.OrderNumber"></td>
                            <td v-html="item.COrderNumber"></td>
                        </tr>

js部分

    export default {
    data:function () {
        return{
           tabTh:[
                {
                    ListNumber:'序号',
                    State:'状态',
                    OrderNumber:'订单编号',
                    COrderNumber:'客户订单编号',
           }
 
        }
    },   
    
    点击元素怎么获取到对应数组tabTh中的命名，如点击<td v-html="item.ListNumber"></td>，获取到ListNumber这个名字，不是获取“序号”，是获取“ListNumber”      

Answer 1

直接写的话

 <tr v-for="(item,index) in tabTh">
                        <td v-html="item.ListNumber" @click="aaa(Object.keys(tabTh[index])[0])"></td>
                        <td v-html="item.State"></td>
                        <td v-html="item.OrderNumber"></td>
                        <td v-html="item.COrderNumber"></td>
                    </tr>
   methods:{
     aaa:function(key){       
                console.log(key);
           
     }
    }                  
                    

严谨点的话:

<tr v-for="(item,index) in tabTh">
                        <td v-html="item.ListNumber" @click="aaa(Object.keys(tabTh[index]),item.ListNumber)"></td>
                        <td v-html="item.State"></td>
                        <td v-html="item.OrderNumber"></td>
                        <td v-html="item.COrderNumber"></td>
                    </tr>
 
     methods:{
     aaa:function(keys,value){
         for(var i in keys){
             if(this.tabTh[0][keys[i]]==value){
                console.log(keys[i]);
             }
         }
     }
    }