Vuejs v-on：mouseover无法显示菜单

Question

当我将鼠标放在LI标签上时，我试图显示一个菜单。

当我使用

时，它与一个简单变量一起工作

@mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false"

这是可行的，但是当我更改为数组时，就像这样

@mouseover="hovers[0]=true" @mouseleave="hovers[0]=false"

它不再起作用了。

变量hoverFormsControls以false开头 此数组（悬停）从所有错误位置开始。

我希望，当我将鼠标悬停在该元素上时，他的子元素将可见，但它不适用于数组，仅适用于变量。

Answer 1

这是reactivity caveat，所以您应该这样做：

 @mouseover="$set(hovers,0,true)" @mouseleave="$set(hovers,0,false)"