CODEWITHSUNDEEP
vue.jsvuejs2
smzapp
smzapp

Reputation: 839

make column and row index in descending order in vuejs

I created a table with columns and rows. Currently, the cell(1,1) starts at top-left of the table. How to start the count from bottom left?

Here is my code:

 <table class="table">
   <tr v-for="row in rows">
        <td v-for="col in cols">
        {{ row }} - {{ col }}
       </td>
   </tr>
</table>

See full code here:

https://jsfiddle.net/wpgkabue/

Upvotes: 1

Views: 843

Answers (2)

Himanshu
Himanshu

Reputation: 274

Here's a simple solution. Just change your code to

<table class="table">
 <tr v-for="row in rows">
    <td v-for="col in cols">
    {{ 9 - row }} - {{ col }}
   </td>
 </tr>
</table>

https://jsfiddle.net/rahmbs7u/

Upvotes: 1

procoib
procoib

Reputation: 487

Your example really only counts up to the integer 8. You need focus on the data.

I've changed your data to lists (you can and probably will have objects later):

data: {
    rows: [1,2,3,4,5,6,7,8],
    cols: [1,2,3,4,5,6,7,8],
}

Then we make a computed property, that returns and reverses your rows variable:

sortedRows: function() {
  return this.rows.reverse()
}

Then inside the template, we change rows to sortedRows:

<tr v-for="row in sortedRows">
  <td v-for="col in cols">
    {{ row }} - {{ col }}
  </td>
</tr>

Heres the JSfiddle example: https://jsfiddle.net/procoib/8u0qhy2w/

Upvotes: 1

Related Questions