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?

How do you create your multiple <tr>s? The answer depends on that. Your current code only has one <tr> — acdcjunior
– acdcjunior, Commented Jun 2, 2019 at 6:28
There is no for-loop here so I don't understand where are you getting the index from — Ru Chern Chong
– Ru Chern Chong, Commented Jun 2, 2019 at 6:30

ray · Accepted Answer · 2019-06-02 06:44:58Z

3

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"

answered Jun 2, 2019 at 6:44

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ray · Accepted Answer · 2019-06-02 06:39:21Z

1

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>

answered Jun 2, 2019 at 6:39

ray

27.3k5 gold badges31 silver badges30 bronze badges

1 Comment

david Over a year ago

I am not able to do this due to some restraints of the project I am working on. the css needs to be per vue component - that''s why im trying to programmatically create it .

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related