我试图使用bootstrap 4和Vue js构建折叠卡。没有vue js, bootstrap 4在适当的过渡下工作得很好，并且没有扩展我没有点击的卡片。当我把我的代码移到Vue后，当我点击按钮时，我不想打开的卡片也随着点击打开了。此外，这种转换在vue js中完全不起作用。下面是控制台给出的错误:
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>
这是我尝试过的:
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>
尝试将:data-target="'#collapseOne'+i"和其他:data-targets更改为:
:data-target="`#collapseOne+${i}`"