Question

我根据Vue数据渲染了一堆HTML div（我将它们命名为单元格）。

单元格的颜色由数据中的十六进制代码决定。

鼠标悬停时，应运行一项功能以更改特定单元格的颜色。

以下是数据的外观以及该功能目前的工作原理：

new Vue({
  el: '#app',
  data: {
    cells: [
             {i: 1, hex: '#111111'},
             {i: 2, hex: '#222222'},
             {i: 3, hex: '#ffffff'}
           ]
  },
  methods: {
    mouseOver: function (e){
       this.cells[e.toElement.id].hex = (Math.floor(Math.random() * 16777215)).toString(16);
    }
  }
})

这是v-for的代码，用于呈现（在本例中）3个单元格：

<div class='cell'
     v-for="cell in cells"
     :id="cell.i"
     :key="cell.i"
     :style="{ backgroundColor: cell.hex}"
     @mouseenter="mouseOver">
</div>

然而，这不起作用。

[Vue警告]：您可能在组件渲染功能中有一个无限的更新循环。

（在<Root>中找到）

我认为这是因为每次数据更改时Vue会重新渲染所有单元格，并且由于组件是新的，因此该函数会再次运行。

然而，我是Vue的新手，不知道如何解决这个问题！

非常感谢！

Answer 1

您忘记在十六进制颜色代码的开头添加#，而忘记将访问数组的索引减少一个。

此外，某些浏览器似乎不支持e.toElement。而是使用e.target What is the difference between Event.target, Event.toElement and Event.srcElement?

this.cells[e.target.id-1].hex = '#' + (Math.floor(Math.random() * 16777215)).toString(16);

工作小提琴：https://jsfiddle.net/TobiObeck/qfpkvn9L/1/

Vue.JS无限重新渲染数据变化

1 个答案: