How to find element of table row with css and vue.js?

Question

I want every other row to be gray, but in the following example - all rows become gray.

  <table>    
    <tr v-for="i in item.env_vars" :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">
      <td> test1 </td>
      <td> test2 </td>
      <td> test3 </td>
    </tr>
  </table>

and I see this error in vue admin tool:

Property or method "index" is not defined on the instance but referenced during render.

What is wrong with my code?

Answer 1

I'm not familiar with vue, but I think you need to add an index variable to your loop:

<tr v-for="(i, index) in item.env_vars"

Answer 2

You can do this with a simple nth-child rule:

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #eee;
}

tr:nth-child(even) {
  background: #ccc;
}

<table>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
</table>