vue中两个v-for并列并且绑定的key都是index会报错

• 报错html结构

<!-- 口味 -->
<div class="tag success" v-for="(item, index) in tastEpreferencesList" :key="index">
  {
    
    {
    
     item }}
</div>
<!-- 禁忌 -->
<div class="tag danger" v-for="(item, index) in specialEatList" :key="index">
  {
    
    {
    
     item }}
</div>

• 报错信息
  

这里v-for并列循环，渲染的dom结构是同级的，key都绑定index会有重复

需要区分一下key

<!-- 口味 -->
<div
  class="tag success"
  v-for="(item, index) in tastEpreferencesList"
  :key="`tastEpreferences-${
      
      index}`"
>
  {
    
    {
    
     item }}
</div>
<!-- 禁忌 -->
<div
  class="tag danger"
  v-for="(item, index) in specialEatList"
  :key="`specialEat-${
      
      index}`"
>
  {
    
    {
    
     item }}
</div>