Vue warn]: Duplicate keys detected: '0'. This may cause an update error. found in Vue js Warn in bootstrap collapse

Question

I was trying to build collapsed card using bootstrap 4 and Vue js. Without vue js, bootstrap 4 was just working fine with its proper transition and was not expanding the cards which I didn't click. After I moved my codes into Vue when I click the button, the cards which I don't want to be opened also opening along with clicked one. Moreover, the transition is completely not working in vue js. Here is what console is giving an error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.
    
found in
    
---> <Beginner> at src/views/beginner.vue
       <App> at src/App.vue
         <Root>

Here is what I have tried:

prices.vue

<template>
<div class="prices">
  <div class="container">
    <h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Наши цены</h1>
    <div class="d-flex row no-gutters justify-content-center">
      <div class="card text-center mt-3" v-for="(price,i) in pricing" :key="i" id="body-collapsed">
        <div class="card-body">
          <h5 class="card-title">10 Уроков</h5>
          <h5 
            id="biggerSize" 
            class="card-title" 
            style="font-weight: bold; padding-bottom:5px; padding-top:15px;"
          >
            1 600 <span class="fas fa-tenge d-inline-block"></span>
          </h5>
          <p id="card-height" class="card-text">за урок</p>
          <p class="card-text">Всего к оплате 16 000тг</p>
          <button class="SeeTheCourse mt-5">Начать заниматься</button>
            <a 
              class="collapsed d-lg-none d-md-block" 
              data-toggle="collapse"
              :data-target="'#collapseOne'+i"
              aria-expanded="false"
              aria-controls="collapseOne"
              href="javascript:;"
              @click.prevent="navItemCollapse(i)"
            >
              <span class="fa fa-chevron-down pull-bottom"></span>
            </a>
            <div 
              id="collapseOne" 
              v-if="price.items.length > 0" 
              class="collapse d-lg-block" 
              :class="{show: price.expand}" 
              aria-labelledby="body-collapsed"
            >
              <div v-for="(subItem,j) in price.items" :key="j">
                <p id="lowerbodyparagraph" class="card-text">{{subItem.price1}}</p>
                <p id="lowerbodyparagraph" class="card-text">{{subItem.price2}}</p>
                <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">                          {{ subItem.price3 }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div 
          v-for="(price,k) in pricing" 
          :key="k" 
          class="card text-center mt-3" 
          id="body-collapsed2"
        >
          <div class="card-body">
          <h5 class="card-title" >30 Уроков</h5>
          <h5 
            id="biggerSize" 
            class="card-title d-inline-block" 
            style="font-weight: bold; padding-bottom:5px;padding-top:15px;"
          >
            1 300<span class="fas fa-tenge d-inline-block"></span>
          </h5>
          <p id="card-height" class="card-text">за урок</p>
          <p class="card-text">Всего к оплате 39 000тг </p>
          <p class="economyTariff">Сэкономить 9 000 тг</p>
          <button class="SeeTheCourse">Начать заниматься</button>
          <a 
            class="collapsed d-lg-none d-md-block" 
            data-toggle="collapse"
            :data-target="'#collapseTwo'+k"
            aria-expanded="false"
            aria-controls="collapseTwo"
            href="javascript:;"
            @click.prevent="navItemCollapse2(k)"
          >
            <span class="fa fa-chevron-down pull-bottom fa-md"></span>
          </a>
          <div 
            id="collapseTwo"  
            v-if="price.items.length>0" 
            class="collapse d-lg-block" 
            :class="{show: price.expand}" 
            aria-labelledby="body-collapsed2"
          >
            <div v-for="(subItem,l) in price.items" :key="l">
             <p id="lowerbodyparagraph" class="card-text">{{subItem.price4}}</p>
             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price5}}</p>
             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">
              {{subItem.price6}}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div 
      v-for="(price,p) in pricing" 
      :key="p" 
      class="card text-center mt-3" 
      id="body-collapsed3"
    >
      <div class="card-body">
        <div class="sale">
          Лучший выбор!
        </div>
        <h5 class="card-title">60 Уроков</h5>
        <h5 
          id="biggerSize" 
          style="color: #2FAFE5; font-weight: bold; padding-bottom:5px;padding-top:15px;"         
          class="card-title"
        >
          1 000 <span class="fas fa-tenge d-inline-block"></span>
        </h5>
        <p id="card-height" class="card-text">за урок</p>
        <p class="card-text">Всего к оплате 60 000тг</p>
        <p class="economyTariff">Сэкономить 16 000 тг</p>
        <button class="SeeTheCourse">Начать заниматься</button>
        <a 
          class="collapsed d-lg-none d-md-block" 
          data-toggle="collapse"
          :data-target="'#collapseThree'+p"
          aria-expanded="false"
          aria-controls="collapseThree"
          href="javascript:;"
          @click.prevent="navItemCollapse3(p)"
        >
          <span class="fa fa-chevron-down pull-bottom"></span>
        </a>
        <div 
          id="collapseThree"
          v-if="price.items.length>0" 
          class="collapse d-lg-block" 
          :class="{show: price.expand}" 
          aria-labelledby="body-collapsed3"
        >
          <div v-for="(subItem,h) in price.items" :key="h">
            <p id="lowerbodyparagraph" class="card-text">{{subItem.price7}}</p>
            <p id="lowerbodyparagraph"  class="card-text">{{subItem.price8}}</p>
            <p id="lowerbodyparagraph" class="card-text">{{subItem.price9}}</p>
            <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">
              {{subItem.price10}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

</template>

<script>
  import $ from 'jquery'
  export default {
    data() {
      return {
        pricing: [{
          name: 'price1',
          expand: false,
          items: [{
            id: 1,
            price1: "10 онлайн уроков",
            price2: "Интерактивные задания",
            price3: "Безлимитный доступ к материалам",
            price4: "30 онлайн уроков",
            price5: "Интерактивные задания",
            price6: "Безлимитный доступ к материалам",
            price7: "60 онлайн уроков",
            price8: "Премиальная поддержка",
            price9: "Обратная связ",
            price10: "Безлимитный доступ к материалам"
          }]
        }]
      }
    ]
  }
  methods: {
    navItemCollapse(index) {
      this.pricing = this.pricing.map((item, i) => {
        item.expand = !item.expand
        if (i !== index) {
          item.expand = false
        }
        return item
      })
    },
    navItemCollapse2(index) {
      this.pricing = this.pricing.map((item, k) => {
        item.expand = !item.expand
        if (k !== index) {
          item.expand = false
        }
        return item
      })
    }
    navItemCollapse3(index) {
      this.pricing = this.pricing.map((item, p) => {
        item.expand = !item.expand
        if (p !== index) {
          item.expand = false
        }
        return item
      })
    }
  }
</script>

Answer 1

Try to change :data-target="'#collapseOne'+i" and other :data-targets to :

:data-target="`#collapseOne+${i}`"