How to control the style of a parent element with CSS and VueJS?

Question

I loop through a set of users to build a table using VueJS 'for' statement.

There's a column called "approved". If it's true then I want the entire table row to be green. How to achieve that?

                <tbody>
                  <tr v-for="user in users" >
                    <td v-for="key in columns">
                        <!-- At This point I can tell if the user is approved but how to change the style of the parent tr element?? -->
                        <span v-if='key == "approved" && user[key] == 0'>
                            Not Approved
                        </span>

                        <span v-else-if='key == "approved" && user[key] == 1'>
                            Approved!
                        </span>

                        <span v-else>
                            {{user[key]}}
                        </span>
                    </td>
                  </tr>
                </tbody>

Fab · Accepted Answer · 2018-06-06 10:17:07Z

1

If you always have "approved" column you can simply achieve it in this way:

<tr v-for="user in users" 
    v-bind:style="{backgroundColor: user['approved'] == 1 ? 'green' : '' }">

or

<tr v-for="user in users" 
    v-bind:class="{green: user['approved'] == 1}">


.green {
     background-color: green:
}

answered Jun 6, 2018 at 10:17

Fab

4,6572 gold badges26 silver badges47 bronze badges

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

Comments

ittus · Accepted Answer · 2018-06-06 09:52:14Z

0

You can use method to assign class to tr dynamically

<tbody>
  <tr v-for="user in users" :class="{'green': isApprove(user, columns)}">
    <td v-for="key in columns">
        <!-- At This point I can tell if the user is approved but how to change the style of the parent tr element?? -->
        <span v-if='key == "approved" && user[key] == 0'>
            Not Approved
        </span>

        <span v-else-if='key == "approved" && user[key] == 1'>
            Approved!
        </span>

        <span v-else>
            {{user[key]}}
        </span>
    </td>
  </tr>
</tbody>


<script>
  ...
  methods: {
    isApprove(user, columns) {
      for (let idx in columns) {
        const key = columns[idx]
        if (key === 'approved' && user[key] == 1) {
          return true
        }
      }
      return false
    }
  }

</script>

<style>
.green {
  background-color: green;
}
</style>

answered Jun 6, 2018 at 9:52

ittus

22.5k5 gold badges62 silver badges59 bronze badges

1 Comment

Amin NAIRI Over a year ago

You can shorten the syntax using arrow functions and the some method.

Collectives™ on Stack Overflow

How to control the style of a parent element with CSS and VueJS?

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