php - 如何用CSS和VueJS控制父元素的样式？

Question

我循环访问一组用户以使用 VueJS 'for' 语句构建一个表。

有一个名为“已批准”的列。如果是这样，那么我希望整个表格行都是绿色的。如何实现？

                <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>

Answer 1

如果你总是有“已批准”列，你可以通过这种方式简单地实现它:

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

或

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


.green {
     background-color: green:
}