適用：v-forループのスタイルは一度だけ - vue.js

Question

Vue.jsでヒートマップテーブルを作成しようとしています。

私はthis jqueryのために作られた素晴らしいチュートリアルに従っています。最後のステップ$(this).css({backgroundColor:clr});

で

私はjqueryのを避けたい、とすべてが正常に動作します、しかし、私はトラブルを抱えているどのように私は、セルごとに一度だけ:styleを変更できますか？今度は明らかに、ループがv-forループの最後のループにあると、各セルの値が変更されます。

私は、カラーデータプロパティが変更され、changeColour: function(color) {// change css}のような別の機能が実行されるたびに見えるwatcherを作成することを考えましたが、どのセルを適用するか分かりません。

これまでのところ私は：

基本的なHTMLテーブル：

<tbody v-for="page in json"> 
    <tr> 
    <td style = 'background-color: #e5e5ff'> 
    {{page.page_path}} </td> 
    <td :style="{ 'background-color': sessionColor }"> 
    {{page.sessions}} </td> 
    <td :style="{ 'background-color': exitColor }"> 
    {{page.exit_rate}} </td> 
    <td :style="{ 'background-color': bounceClr }"> 
    {{page.bounce_rate}} </td> 
    <td :style="{ 'background-color': timeClr }"> 
    {{page.avg_time_on_page}} </td> 
    </tr> 

4色特性、およびRGB値を生成するの世話をする方法とVueのインスタンス。

ここで私は完全にjsfiddleを持って、不足している唯一のものは、各セルのために一度V-結合スタイルです。私はそれをどのようにすることができますか？ありがとう！

https://jsfiddle.net/6sLx3su2/

Answer 1

私はこのような何かをするだろう。

this.sessionColor = sessClr; 
    this.exitColor = exitClr; 
    this.bounceColor = bounceClr; 
    this.timeColor = timeClr;, 

と

this.json[i].sessionColor = sessClr; 
    this.json[i].exitColor = exitClr; 
    this.json[i].bounceColor = bounceClr; 
    this.json[i].timeColor = timeClr; 

を交換して、以下のようなJSONの各エントリのHTMLで参照：

<td :style="{ 'background-color': page.sessionColor }"> 

チェックこのfiddle

Hそれは役立ちます。