仅在 v-for 循环上应用 :style 一次 - 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>

一个具有 4 个颜色属性的 Vue 实例，以及一个负责生成 RGB 值的方法。

这里我有完整的 jsfiddle，唯一缺少的是每个单元格的 v-binding style once。我怎么能这样做？谢谢！

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

希望对你有帮助。