Показать и скрыть элементы карусели на Vue JS показать большую карусель по клику

Question

У меня есть 2 деления, у каждого из них есть компонент карусели, и если вы нажмете на маленькое изображение карусели на первом делении, я покажу карусель с большими изображениями, и если вы нажмете на остальную часть приложения, большая карусель закроется, и карусель с маленькими изображениями вернется. Все работает нормально, пока вы не покинете компонент через window.go(-1), а затем вернетесь, код не работает. Я пытаюсь угадать, почему, но не могу понять. Я удаляю прослушиватели событий, когда перехожу на другую ссылку на странице, и когда я возвращаюсь по какой-то причине, this.body = document.getElementById("app") get - это весь #app, включая 2 моих div, хотя для них я использую event.stopPropagation и проверяю ev.target !== this.carouselBig.
Почему элементы div правильно подставляются, пока вы не переопределили компонент? Я даже удаляю слушателей и воссоздаю новых на mount

<template>
  <div v-if="images">
    <div
      id="carouselSmall"
      v-show="!showBigImages"
      class="block"
      style="width:400px; max-width:100%; border:1px solid #ccc; margin:10px auto; border-radius:3px;"
    >
      <el-carousel type="card" height="100px">
        <el-carousel-item v-for="item in images" :key="item.small">
          <img :src="item.small" @click="displayBigImages()">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div
      id="carouselBig"
      v-show="showBigImages"
      class="block"
      style="width:100%; border:1px solid #ccc; margin:10px auto; border-radius:3px;"
    >
      <el-carousel type="card" height>
        <el-carousel-item v-for="image in images" :key="image.original">
          <img :src="image.original">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import common from "./Config";
import { Carousel, CarouselItem } from "element-ui";
Vue.use(Carousel);
Vue.use(CarouselItem);
export default {
  props: ["images"],
  data() {
    return {
      carouselBig: document.getElementById("carouselBig"),
      carouselSmall: document.getElementById("carouselSmall"),
      body: document.getElementById("app")
    };
  },
  computed: {
    showBigImages() {
      return this.$store.state.showBigImages;
    }
  },
  methods: {
    displayBigImages() {
      this.$store.commit("setshowBigImagesM", true);
    },
hideBigCarousel(destroy) {
      this.carouselBig = document.getElementById("carouselBig");
      this.carouselSmall = document.getElementById("carouselSmall");
      this.body = document.getElementById("app");

      let stopEvent = ev => {
        ev.stopPropagation();
      };

      let onBodyClick = ev => {
        if (ev.target !== this.carouselBig) {
          this.$store.commit("setshowBigImagesM", false);
        }
      };

      if (destroy) {
        this.carouselBig.removeEventListener("click", stopEvent, false);
        this.carouselSmall.removeEventListener("click", stopEvent, false);
        this.body.removeEventListener("click", onBodyClick, false);
      } else {
        this.carouselBig.addEventListener("click", stopEvent, false);
        this.carouselSmall.addEventListener("click", stopEvent, false);
        this.body.addEventListener("click", onBodyClick, false);
      }
    }
  },
  mounted() {
    window.onload = () => {
      this.hideBigCarousel();
    };
  },
  beforeDestroy() {
    this.hideBigCarousel(true);
  }
};
</script>

Answer 1

Это всего лишь предложение.Вам нужно проверить это, или если вы дадите jsfiddle что-то подобное, я проверю это.
Прежде всего, удалите из данных все, а не данные.И используйте ref.v-if="images" нужно изменить на v-show, потому что ссылка внутри этого div не будет работать.И я убираю некоторые для разрешения, вы можете вернуть их в свой код.

<template>
  <div v-show="images">
    <div ref="carouselSmall"
         v-show="!showBigImages"
         class="block"
    >
      <el-carousel type="card" height="100px"></el-carousel>
    </div>
    <div ref="carouselBig"
         v-show="showBigImages"
         class="block"
    >
      <el-carousel type="card" height></el-carousel>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import common from "./Config";
import { Carousel, CarouselItem } from "element-ui";
Vue.use(Carousel); // you need use them inside all components? So, replace this code to main.js
Vue.use(CarouselItem);

export default {
  props: ["images"],
  data() {
    return {
    };
  },
  computed: {
    showBigImages() {
      return this.$store.state.showBigImages;
    }
  },
  methods: {
    displayBigImages() {
      this.$store.commit("setshowBigImagesM", true);
    },
    hideBigCarousel(destroy) {
      const carouselBig = this.$refs.carouselBig;
      const carouselSmall = this.$refs.carouselSmall;
      const body = document.getElementById("app"); // maybe better use this.$root?

      let stopEvent = (ev) => {
        ev.stopPropagation();
      };

      let onBodyClick = (ev) => {
        // contains check that element inside carouselBig
        if (!carouselBig.contains(ev.target)) {
          this.$store.commit("setshowBigImagesM", false);
        }
      };

      if (destroy) {
        carouselBig.removeEventListener("click", stopEvent, false);
        carouselSmall.removeEventListener("click", stopEvent, false);
        body.removeEventListener("click", onBodyClick, false);
      } else {
        carouselBig.addEventListener("click", stopEvent, false);
        carouselSmall.addEventListener("click", stopEvent, false);
        body.addEventListener("click", onBodyClick, false);
      }
    }
  },
  mounted() {
     this.hideBigCarousel();
  },
  beforeDestroy() {
    this.hideBigCarousel(true);
  }
};
</script>