Vue.js与Bootstrap5：如何通过Prop动态设置div id及按钮data-bs-target

在复用Bootstrap 5轮播组件时，必须保证每个实例的id和控制按钮的data-bs-target一一对应且唯一，否则会出现点击不同按钮却触发同一个轮播的问题。你的代码已经通过父组件传入了唯一的carouselNumber Prop，但未正确使用Vue的动态绑定语法，导致标识没有真正动态生成。

核心修改点 #

• 元素属性前加冒号:实现动态绑定，Vue才会解析变量而非当作字符串
• data-bs-target需要拼接#前缀，因为它是CSS选择器格式

修改后的RestauranteCard.vue HTML代码 #

<div
    v-if="!noimage"
    :id="carouselNumber" <!-- 动态绑定id -->
    class="carousel slide"
    data-bs-ride="carousel"
    data-interval="false"
>
  <div class="carousel-inner">
    <div
        v-for="(link, idx) in imagenesLink"
        :key="link"
        class="carousel-item"
        :class="{ active: idx === 0 }"
    >
      <img :src="link" class="d-block w-100" alt="foto" />
    </div>
  </div>
  <button
      class="carousel-control-prev"
      type="button"
      :data-bs-target="`#${carouselNumber}`" <!-- 动态绑定选择器 -->
      data-bs-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button
      class="carousel-control-next"
      type="button"
      :data-bs-target="`#${carouselNumber}`" <!-- 动态绑定选择器 -->
      data-bs-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

优化后的RestauranteCard.vue JS代码（可选） #

为了避免carouselNumber为空的情况，可以添加必填校验：

props: {
  restaurante: {
    type: Object,
    required: true,
  },
  carouselNumber: {
    type: String,
    required: true, // 标记为必填，确保父组件必传
    validator: (value) => {
      return !!value; // 确保值不为空
    }
  }
},

父组件调用代码（确认restaurante.id唯一即可） #

<div v-else
    class="card row-cols-1"
    v-for="restaurante in restaurantes"
    :key="restaurante.id"
>
  <RestauranteCard :restaurante="restaurante" :carouselNumber="restaurante.id.toString()"></RestauranteCard>
</div>

注：如果restaurante.id是数字类型，建议用.toString()转为字符串，避免DOM id出现数字开头的兼容性问题（虽然现代浏览器支持，但更符合HTML规范）

内容的提问来源于stack exchange，提问作者Julián Jose