應用：v-for循環的風格只有一次 - vue.js

Question

我試圖用Vue.js構建一個熱圖表。

我一直在關注this jquery的很棒的教程。

我想避免jQuery和一切工作正常，但我有在最後一步$(this).css({backgroundColor:clr});

我怎樣才能改變:style只有一次每個細胞的煩惱？現在它明顯地改變了每個單元格在v-for循環的最後一個循環處的值。

我曾想過創建一個watcher，它每次都會看到顏色數據屬性發生變化，並運行一個單獨的函數，如changeColour: function(color) {// change css}，但我不知道應該使用哪個單元格。

到目前爲止，我有：

一個基本的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> 

一個Vue公司的實例與4個色屬性和方法，這需要產生的RGB值的照顧。

在這裏，我有完整的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; 

，並在HTML指像下面的JSON每個條目：

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

檢查這個fiddle

^h操作它有幫助。