Показывать Div при наведении курсора на основе идентификатора в Vue JS - PullRequest
Новая
       12

Показывать Div при наведении курсора на основе идентификатора в Vue JS

0 голосов
/ 16 февраля 2019

У меня есть div, который, когда я хочу навести курсор на него, покажет другой div.Тем не менее, мой первый div динамический, у него есть идентификатор.Так как же я смогу навести курсор на идентификатор на основе его идентификатора?

Это должно быть @mouseenter="hoverService{{services.id}} = true", но это вызывает ошибку.Поэтому я сделал код ниже просто статическим.

Вот мой код ниже: 

<template>
    <div
    class="col-md-3"
    v-for="(services, index) in servicesFiltered"
    :key="index"
    @mouseenter="hoverService = true"
    @mouseleave="hoverService = false"
    >
    <div class="service_background" v-if="hoverService">
        <div class="mb-1" v-for="(sub_services, index) in services.menu_items" :key="index">
        <router-link
            :to="{ path: `/${sub_services.data}`}"
        >
            <a
            href="#"
            class="btn btn-outline-primary w-100 services_button"
            >{{sub_services.text }}</a>
        </router-link>
        </div>
    </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      hoverService: false
    };
  }
};
</script>

1 Ответ

0 голосов
/ 16 февраля 2019

Попробуйте этот код

https://codesandbox.io/s/y7p9qyyovz

Вам необходимо поддерживать наведение на каждый элемент, которым нельзя манипулировать, используя одну переменную для нескольких элементов.

...