Why might there be duplication?

Question

JavaScript

I use v-if construction to show 2 blocks. With v-if, the v-for loop normally iterates through the array without duplicating values. When blocks need to be shown, v-else starts duplicating them.

<template>
  <div class="container review">
    
    <button @click="startScenario">start</button>
    <div class="row review-mb">
      <review-item v-if="newOrder" style="margin-right: 60px;" v-for="resp in response"
                   :responseText="resp.responseText"
                   :userSrc="resp.userSrc"
                   :userName="resp.userName"
                   :userTown="resp.userTown"
                   :key="resp.id"
                   :rating="resp.rating"
                   :quality="resp.quality"/>

      <review-item v-else v-for="item in newResponseList"
                   :responseText="item.responseText"
                   :userSrc="item.userSrc"
                   :userName="item.userName"
                   :userTown="item.userTown"
                   :key="item.id"
                   :rating="item.rating"
                   :quality="item.quality"/>
      <transition name="bounceRight">
        <div :key="22" class="col-2 review-add review-add_block" v-show="newResponse">
          <sphere-icon :iconSrc="iconSrc" :iconText="iconText"/>
          <span class="review-add review-add_title">Новый отзыв!</span>
          <transition name="fade" tag="span" mode="out-in">
            <span :key="newResponseText" class="review-add review-add_text" v-if="newResponseText">Клиент набират сообщение
          <transition-group key="points" name="fade">
            <span :key="1" v-show="pointShow1">.</span>
            <span :key="2" v-show="pointShow2">.</span>
            <span :key="3" v-show="pointShow3">.</span>
          </transition-group>
            </span>
            <span key="elseResponse" class="review-add review-add_text" v-else>
              текст
            </span>
          </transition>
          <button class="review-add review-add_btn">Читать</button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: "BlockReview",
    timers: {
      point: {
        time: 1500,
        autostart: false,
        repeat: true,
      }
    },
    components: {
      ReviewItem: () => import('../ReviewItem'),
      SphereIcon: () => import('../SphereIcon'),
    },
    data() {
      return {
        newOrder: true,
        newResponseText: true,
        pointShow1: true,
        pointShow2: true,
        pointShow3: true,
        newResponse: true,
        iconSrc: './../../static/svg/responseMess.svg',
        iconText: false,
        response: [
          {
            id: '0',
            responseText: `Получила от сына в подарок замену двух окон в моей квартире! Сын пригласил ко мне домой замерщика из компании
      "Стоимость окон". Приехал очень воспитанный молодой человек, все мне подробно рассказал, сделал дополнительную
      скидку по социальной карте.`,
            rating: 5,
            quality: 5,
            userSrc: 'https://via.placeholder.com/147x147',
            userName: 'Человак',
            userTown: 'Город'
          },
          {
            id: '1',
            responseText: `Получила от сына в подарок замену двух окон в моей квартире! Сын пригласил ко мне домой замерщика из компании
      "Стоимость окон". Приехал очень воспитанный молодой человек, все мне подробно рассказал, сделал дополнительную
      скидку по социальной карте.`,
            rating: 5,
            quality: 5,
            userSrc: 'https://via.placeholder.com/147x147',
            userName: 'Человак',
            userTown: 'Город'
          },
          // {id: '', responseText: ``, rating: 5, quality: 5, userSrc: '', userName: '', userTown: ''},
          // {id: '', responseText: ``, rating: 5, quality: 5, userSrc: '', userName: '', userTown: ''}
        ],
        newResponseList: [
          {
            id: '31',
            responseText: `bsbfjshebfKSHFb sgvfj bksBEFk hbSKf blj bksdhrbgk hbrkhgab karbfkh abrjfn aj`,
            rating: 3,
            quality: 1,
            userSrc: 'https://via.placeholder.com/147x147',
            userName: 'Человак',
            userTown: 'Город'
          },
          // {
          //   id: '42',
          //   responseText: `ML nJNBGk SNKHbskhf jnksgbLKSFNb jhbrgk dnbkfhbzj,n kjsnfglszm.`,
          //   rating: 2,
          //   quality: 3,
          //   userSrc: 'https://via.placeholder.com/147x147',
          //   userName: 'Человак',
          //   userTown: 'Город'
          // },
        ],
      }
    },
    methods: {
      /**
       * @property функция проходится по дочерним компонентам с именен {review-item} в зависимости от индекса задаёт время задержки появления.
       * @var { statusChild }- фиксируем состояние дочерних компонентов
       * @return {boolean} ничего не возвращает
       */
      startScenario: function () {
        let statusChild = this.$children;

        statusChild.map(function (el, index) {
          if (el.$options._componentTag === 'review-item') {
            if (index === 1) {
              setTimeout(function () {
                el.startShow();
              }, 2000)
            } else {
              setTimeout(function () {
                el.startShow();
              }, 1000)
            }
          }
        });
        setTimeout(() => {
          this.newResponse = !this.newResponse;
        }, 3000);

        this.point();

        return true;
      },
      point: function () {
        setTimeout(() => {
          this.pointShow1 = !this.pointShow1;
        }, 500);
        setTimeout(() => {
          this.pointShow2 = !this.pointShow2;
        }, 1000);
        setTimeout(() => {
          this.pointShow3 = !this.pointShow3;
        }, 1500);
      },

    }
  }
</script>

Answer 1

Found a solution, Vue explains it by itself v-for and v-if