javascript - Vue.js 选择具有特定类名的最接近的 div

Question

我有以下 HTML 标记:

<div id="app">
<div class="image">
    <div class="overlay">
        <p>Some overlay text</p>
    </div>
    <img src="https://placeimg.com/640/480/any" class="img-fluid">
</div>
<div class="info">
    <h6 class="name">Title here</h6>
    <p class="meta">Meta here</p>
</div>
<div class="info-button" @mouseover="addParentClass" @mouseout="removeParentClass">
    Mouse over here!
</div>

我想做的是，每当有人将鼠标悬停在带有“信息按钮”类的 div 上时，某些类就会添加到上面的图像和叠加层中。

我已经让它与以下 Vue.js 标记一起工作:

let vm = new Vue({
el: "#app",
data:{
    isHovering: false
},
methods: {
    addParentClass (event) {
        event.target.parentElement.children[0].children[1].classList.add('active')
        event.target.parentElement.children[0].children[0].classList.add('overlay-active')

    },
    removeParentClass (event) {
        event.target.parentElement.children[0].children[1].classList.remove('active')
        event.target.parentElement.children[0].children[0].classList.remove('overlay-active')
    },
},
})

不过好像有很多多余的JS。我试图让它与:

event.target.parent.closest('.overlay'.).classList.add('overlay-active')

还有很多类似的parent/children/closest selectors，但是我好像得不到我想要的结果。我怎样才能让“最接近”的选择器在这里工作？

这是一个带有非常粗略的工作示例的代码笔:Link to codepen

编辑:我想指出我想在循环中使用它，所以我会有多个图像，我想让叠加层只出现在当前图像上。

Answer 1

VueJS 是响应式(Reactive)的。这意味着数据应该驱动 DOM。您不应该自己玩弄 DOM。

为数据添加一个事件属性；

let vm = new Vue({
    el: "#app",
    data:{
        isHovering: false,
        active: false
    },
    methods: {
        addParentClass (event) {
           this.active = true;
        },
        removeParentClass (event) {
          this.active = false;         },
    },
})

并通过以下方式使 DOM 具有响应性；

    <div class="overlay" :class="{'overlay-active': active}" >
        <p>Some overlay text</p>
    </div>

这是更新后的codepen

https://codepen.io/samialtundag/pen/Jeqooq