Javascript @如果调用$set，则不触发鼠标

我有一个带有表格行的组件，我想用鼠标标记连续选择的单元格。 我的目标是：鼠标向下移动一个单元格开始标记单元格，同时按住鼠标键移动鼠标标记鼠标悬停的每个单元格；释放鼠标按钮将停止标记单元格

该表如下所示（基于td对象的排列）：

这基本上可以正常工作（即mousedown和mouseover），只有mouseup事件不会被识别，只要setover（）中有$set调用。 然后，停止“选择模式”的唯一方法是用鼠标离开该行，触发表的@mouseleave。 当我删除setover方法中的$set调用时，mouseup事件被识别为预期事件

---

因此，我的问题是：$set调用为什么会对mouseup事件产生影响？我该如何解决这一问题？

可能是因为您对数据的更改会使组件重新呈现，并且在此过程中，事件注册的元素会被替换为新的元素或其他内容。使用“关键点”属性可防止出现这种情况。如果仍然出现这种情况，请在jafiddle或codepen上提供一个实例。补充：由于您似乎使用Vue 1.0，而不是key，因此它是

跟踪方式

，也可以尝试使用mouseenter而不是Mouse，而不仅仅是添加跟踪方式，非常感谢您的建议！

<table @mouseleave="stopSelect()" @mouseup="stopSelect()">
    <tr>
        <td v-for="td in tds" v-bind:class="{ 'selected': td.active }"
            @mousedown="startSelect($index)" 
            @mouseover="setover($index)"
            >.</td>
    </tr>
</table>

setover (i) {
    if(this.mouseIsDown) {
        this.tds.$set(i, {active: true});
    }
},
stopSelect () {
    this.mouseIsDown = false;
},
startSelect (i) {
    this.tds.forEach(function (it) {
            it.active = false;
    });
    this.mouseIsDown = true;
    this.setover(i);
},