Vue3中Bootstrap下拉按钮v-for无法渲染全部循环元素问题

这不是Bootstrap和Vue的兼容bug，是代码写法不符合Bootstrap下拉组件的DOM结构规范。

Bootstrap 5下拉组件的结构要求非常明确：一个触发按钮只能对应一个.dropdown-menu容器，所有的菜单项（.dropdown-item）都必须放在这个唯一的容器内部。
你的代码把v-for绑定在了.dropdown-menu的div标签上，等于循环生成了两个独立的下拉菜单容器，每个容器里仅包含1个菜单项。Bootstrap的下拉交互脚本只会识别和触发按钮关联的第一个.dropdown-menu，后续生成的容器不会被正确挂载、触发显示，因此你只能看到第一个语言选项。
至于普通li标签能正常渲染，是因为<li>本身就是列表的独立条目元素，在li上绑定v-for循环生成多个条目完全符合HTML列表的结构规则，自然不会出现异常。

把v-for从.dropdown-menu容器标签移到内部的菜单项标签上，保证页面只渲染一个下拉菜单容器，所有菜单项在容器内部循环生成即可。修正后的模板代码如下：

<template>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle btn-link text-decoration-none text-dark" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {{ languages[$i18n.locale] }}
    </button>
    <!-- dropdown-menu为唯一容器，不要在此标签加v-for -->
    <div class="dropdown-menu" aria-labelledby="languageDropdown">
      <!-- v-for绑定在菜单项上循环生成选项 -->
      <a
        class="dropdown-item"
        href="#"
        v-for="(value, key) in languages"
        :key="key"
        @click.prevent="changeLanguage(key)"
      >
        {{ value }}
      </a>
    </div>

    <li v-for="(value, key) in languages" :key="key">
      {{ key }}: {{ value }}
    </li>
  </div>
</template>

script部分的原有逻辑无需修改，调整结构后两个语言选项即可正常在下拉菜单中显示。额外给菜单项的click事件加了.prevent修饰符，避免点击时页面跳转到顶部。

内容的提问来源于stack exchange，提问作者Zumpel