[Vuejs]-Vue JS – Prevent show duplicate value in v-for

0👍

You have declared the tag to display the component inside the v-for loop which runs twice, hence you need to display the component outside of that div.

Updated template section of App.vue file:

<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>

Leave a comment