Vue JS - 防止在 v-for 中显示重复值

Question

当我将鼠标悬停在四张图片上时，会显示某个组件。问题是显示的组件在 v-for 内部并且它们被重复我怎样才能摆脱这个？ Here is the given code in codesandbox

<template>
  <div>
    <div class="enjoy_headline_container">
      <div class="EnjoyGirlsContainer">
        <div>
          <h3>Shrink the screen to 568 pixels or lower to see the problem</h3>
        </div>

        <div class="EnjoyGirlsList">
          <div
            v-for="(chunk, index) in Math.ceil(EnjoyGirlsList.length / 2)"
            :key="'chunk-' + index"
            :class="'wrap-' + index"
          >
            <div
              v-for="(item, index) in EnjoyGirlsList.slice(
                (chunk - 1) * 2,
                chunk * 2
              )"
              :key="'img-' + index"
              class="EnjoyCard"
              :class="'EnjoyCard-' + index"
            >
              <div>
                <img
                  @mouseover="mouseOver(item, (hover = true))"
                  v-bind:src="item.imagePath"
                  alt="Snow"
                />
              </div>

              <div class="EnjoyCardContainer">
                <div
                  :style="{ background: item.textColor }"
                  class="EnjoyCardChildContainer"
                >
                  <h3 class="EnjoyCardChildContainerTitleName">
                    {{ item.titleName }}
                  </h3>
                </div>
              </div>
            </div>

            <div class="EnjoyGirlsHoverEffect">
              <div
                class="HoverLogic"
                @mouseleave="mouseout(enjoy, (hover = false))"
                v-for="(enjoy, index) in EnjoyGirlsList"
                :key="index"
              >
                <div class="EnjoyGirlsChildHoverEffect">
                  <component
                    v-show="enjoy.hovered"
                    v-bind:is="enjoy.componentName"
                  ></component>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EnjoyBlue from "./components/EnjoyBlue";
import EnjoyGreen from "./components/EnjoyGreen";
import EnjoyYellow from "./components/EnjoyYellow";
import EnjoyRed from "./components/EnjoyRed";

export default {
  name: "HomePage",
  components: {
    EnjoyRed,
    EnjoyYellow,
    EnjoyGreen,
    EnjoyBlue,
  },

  data() {
    return {
      homePageImageList: [
        {
          imageURL:
            "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
        {
          imageURL:
            "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
        {
          imageURL:
            "http://astragem.com/static/images/MenuGirl/HomePageBackground/15-min.png",
        },
      ],
      hover: false,
      sectionGirlsListComponentsNames: [
        "EnjoyRed",
        "EnjoyYellow",
        "EnjoyGreen",
        "EnjoyBlue",
      ],
      EnjoyGirlsList: [
        {
          imagePath:
            "https://lh3.googleusercontent.com/_0OiZeWgElIETUMZW8B9wEZR-V0BLMyDBHfK6hdYQVGzsryLQAZ0GEL9_PDi5NlzmpK8bETuJcZ0CtUQKnErvs36Xw=w640-h400-e365-rj-sc0x00ffffff",
          titleName: "TEENS",
          textColor: "#74C8C5",
          hovered: false,
          componentName: "EnjoyBlue",
        },
        {
          imagePath:
            "https://p0.piqsels.com/preview/32/831/578/leaf-malina-garden-nature-thumbnail.jpg",
          titleName: "MINXES",
          textColor: "#76ED00",
          hovered: false,
          componentName: "EnjoyGreen",
        },
        {
          imagePath:
            "https://dandelionmarketing.com/wp-content/uploads/2020/01/yellow-09.jpg",
          titleName: "MILFS",
          textColor: "#FFE600",
          hovered: false,
          componentName: "EnjoyYellow",
        },
        {
          imagePath:
            "http://pm1.narvii.com/6691/30c6c5246b1aee0e676f741f63ab144bbdb77da2_00.jpg",
          titleName: "COURGARS",
          textColor: "#CC003D",
          hovered: false,
          componentName: "EnjoyRed",
        },
      ],
    };
  },
  methods: {
    mouseOver: function (enjoy) {
      this.EnjoyGirlsList.forEach((enjoy) => (enjoy.hovered = false));
      enjoy.hovered = true;
    },
    mouseout: function (enjoy) {
      enjoy.hovered = false;
    },
  },
};
</script>

享受蓝色

<template>
   <p>Blue Component</p>
</template>

享受绿色

<template>
   <p>Green Component</p>
</template>

享受黄色

<template>
   <p>Yellow Component</p>
</template>

享受红色

<template>
   <p>Red Component</p>
</template>

当我将鼠标悬停在四张图片上时，会显示某个组件。问题是显示的组件在 v-for 内部并且它们重复了我怎样才能摆脱这个？

Answer 1

您已经声明了在运行两次的 v-for 循环内显示该组件的标签，因此您需要在该 div 之外显示该组件。

更新了 App.vue 文件的模板部分：

<template>
  <div>
    <div class="enjoy_headline_container">
      <div class="EnjoyGirlsContainer">
        <div>
          <h3>Shrink the screen to 568 pixels or lower to see the problem</h3>
        </div>

        <div class="EnjoyGirlsList">
          <div
            v-for="(chunk, index) in Math.ceil(EnjoyGirlsList.length / 2)"
            :key="'chunk-' + index"
            :class="'wrap-' + index"
          >
            <div
              v-for="(item, index) in EnjoyGirlsList.slice(
                (chunk - 1) * 2,
                chunk * 2
              )"
              :key="'img-' + index"
              class="EnjoyCard"
              :class="'EnjoyCard-' + index"
            >
              <div>
                <img
                  @mouseover="mouseOver(item, (hover = true))"
                  v-bind:src="item.imagePath"
                  alt="Snow"
                />
              </div>

              <div class="EnjoyCardContainer">
                <div
                  :style="{ background: item.textColor }"
                  class="EnjoyCardChildContainer"
                >
                  <h3 class="EnjoyCardChildContainerTitleName">
                    {{ item.titleName }}
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="EnjoyGirlsHoverEffect">
          <div
            class="HoverLogic"
            @mouseleave="mouseout(enjoy, (hover = false))"
            v-for="(enjoy, index) in EnjoyGirlsList"
            :key="index"
          >
            <div class="EnjoyGirlsChildHoverEffect">
              <component
                v-show="enjoy.hovered"
                v-bind:is="enjoy.componentName"
              ></component>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>