How to get the Row name and column number in the table in Vue?

Question

Is there any way I can get the column number or position and the row header of the table using vue?

Output now so far is like this.

Code in generating the table:

<table v-if="this.itemList.length > 0">
                    <thead class="ui-table-header-row">
                        <tr>
                            <th class="ui-table-header-cell l-padding"></th>
                            <th class="ui-table-header-cell center"  v-for="item in 31" :key="item.id">{{thisMonth}} July{{ item }}Day</th>

                        </tr>
                    </thead>
                        <template>
                            <tr>
                                <td></td>
                            </tr>
                            <tbody style="border-bottom:#dbb100 1px"  v-for="(item,index) in itemList" :key="index.id" >
                                <tr class="left-align">
                                    <td>{{item.name}}</td>
                                    <td v-for="(item,index) in costList" :key="index.id">{{item.total_work}}</td>
                                </tr>
                             </tbody>
                       </template>
</table>

On this line <td v-for="(item,index) in costList" :key="index.id">{{item.total_work}}</td>, I would have to check first the row header name if it matches with my item.name in costList before displaying the value. I have found somewhat near to my desired output here but I don't know how to reproduce it using vue. Any inputs is appreciated.

score 2 · Accepted Answer · answered Jul 18 '18 at 04:54

I reproduced the sample that you've included into it's vue counterpart.

new Vue({
  el: "#app",
  data: {
   days: [1,2,3,4,5],
    itemList: [
     {
       name: 'Apple'
      },
      {
       name: 'Banana'
      },
      {
       name: 'Carrot'
      }
    ]
  },
  methods: {
   alert(item_index, day_index) {
     let item = this.itemList[item_index];
      let day = this.days[day_index];
      
     alert(item.name + ', Day ' + day);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <table border="1">
      <thead>
          <tr>
            <th>Day/Time</th>
            <th v-for="day in days" width="50">Day {{ day }}</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(item, item_index) in itemList" :key="item.name">
            <td>{{ item.name }}</td>
            <td v-for="(day, day_index) in days" @click="alert(item_index, day_index)">Click</td>
          </tr>
      </tbody>
  </table>
</div>

See this JS Fiddle: https://jsfiddle.net/eywraw8t/180692/

I have a problem [here](https://stackoverflow.com/questions/46380574/how-to-display-the-index-of-an-array-using-the-vuetify-data-table), my assigned value updates each time I get to the method. My situation is explained further there. I hope you can help me with it. — , Jul 20 '18 at 11:43
Hi, I'm sorry. I can't understand what you mean and also it is an another problem. Can you create a new question and describe it in detail and give me the link? — Julian Paolo Dayag, Jul 20 '18 at 11:49
Please click the link or follow this one https://stackoverflow.com/questions/46380574/how-to-display-the-index-of-an-array-using-the-vuetify-data-table . Thanks — , Jul 20 '18 at 11:50

How to get the Row name and column number in the table in Vue?

1 Answers1