【vue.js でテーブルの特定の行だけ色を変えたい】

やりたいこと　→テーブルを描写する際に特定の行の色を変えたい

こんにちは。駆け出しエンジニアのものです。
DBからデータを抽出し、for文を回してテーブルを描写(html)しているのですが、特定の行だけ色を変えたいと思っています。

html
1    <div id="table">
2      <table>
3        <thead v-click-outside="outside">
4            <td v-for="key in columns" style="border-bottom: 2px solid #3580a9;">
5              <div>{{key}}</div>
6            </td>
7          </tr>
8        </thead>
9        <tbody>
10          <tr v-for="dd in displayItems" >
11            <td v-for="key in columns">
12              <p>{{dd[key]}}</p>
13            </td>
14          </tr>
15        </tbody>
16      </table>
17    </div>
18    # displayitem は dict型
19    # columns は　配列

このときに、例えば

dd[email] == none

である場合に、行の色を変えたく、試行錯誤しています。
どなたかご教授いただけると幸いでございます。

行動規範の内容に同意します

回答1件

ベストアンサー

インラインスタイルのバインディング
を利用すると

html
1<html>
2<head>
3<meta charset="utf-8">
4<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5</head>
6<body>
7<div id="app">
8  <div id="table">
9    <table>
10      <thead>
11          <td v-for="key in columns" style="border-bottom: 2px solid #3580a9;">
12            <div>{{key}}</div>
13          </td>
14        </tr>
15      </thead>
16      <tbody>
17        <tr v-for="dd in displayItems" v-bind:style="[dd['hoge1'] == 'aaaaa' ? tr1 : tr2]">
18          <td v-for="key in columns">
19            <p>{{dd[key]}}</p>
20          </td>
21        </tr>
22      </tbody>
23    </table>
24  </div>
25</div>
26<script>
27var app = new Vue({
28  el: '#app',
29  data: function() {
30    return({
31      tr1: {
32        'background-color': 'red',
33      },
34      tr2: {
35        'background-color': 'blue',
36      },
37      columns: [
38        'hoge1',
39        'hoge2',
40        'hoge3',
41        'hoge4',
42        'hoge5',
43        'hoge6',
44        'hoge7',
45      ],
46      displayItems: [
47        {
48          hoge1: 'aaaaa',
49          hoge2: 'bbbbb',
50          hoge3: 'ccccc',
51          hoge4: 'ddddd',
52          hoge5: 'eeeee',
53          hoge6: 'fffff',
54          hoge7: 'ggggg',
55        },
56        {
57          hoge1: '11111',
58          hoge2: '22222',
59          hoge3: '33333',
60          hoge4: '44444',
61          hoge5: '55555',
62          hoge6: '66666',
63          hoge7: '77777',
64        },
65      ],
66      outside: '',
67    });
68  }
69})
70</script>
71</body>
72</html>