Vue循环渲染卡片时点击图标下拉框仅在首张卡片显示如何修复？

问题根因 #

核心问题出在icons.vue组件的复用逻辑上：

• 你给下拉菜单设置了固定的id="myDropdown"，当循环渲染多张卡片时，页面会出现多个id重复的元素，而document.getElementById只会匹配到页面中第一个符合的元素，因此无论点击哪张卡片的更多图标，操作的都是第一张卡片的下拉框。
• 直接操作原生DOM的写法不符合Vue的设计逻辑，用组件内部的响应式状态控制显隐会更稳妥，也能避免组件之间状态互相干扰。

修复方案（仅需修改icons.vue即可） #

改用组件独立的响应式状态控制下拉显隐，替换原有原生DOM操作，修改后的完整代码如下：

<template>
<div class="footer">
    <i class="fas fa-bell"></i>
    <i class="fas fa-user"></i>
    <i class="fas fa-palette"></i>
    <i class="fas fa-image"></i>
    <i class="fas fa-archive"></i>
    <div class="dropdown">
        <i @click="isDropdownShow = !isDropdownShow" class="fas fa-ellipsis-v"></i>
        <!-- 用v-show控制当前组件的下拉显隐，不需要固定id -->
        <div v-show="isDropdownShow" class="dropdown-content">
            <a href="#">Delete Note</a>
            <a href="#">ChangeLabel</a>
            <a href="#">Add drawing</a>
        </div>
    </div>
</div>
</template>

<script>
export default {
    // 每个组件实例持有独立的显隐状态，互不干扰
    data() {
        return {
            isDropdownShow: false
        }
    }
}
</script>

<style scoped>
/* 原有样式不变，删掉原来的.show类样式即可，v-show会自动控制显隐 */
.footer i {
    opacity: 0.9;
    position: relative;
}

.footer .fa-bell {
    margin-top: 5px;
    margin-left: 10px;
}

.footer .fa-user {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-palette {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-image {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-archive {
    margin-top: 5px;
    margin-left: 40px;
}

.footer .fa-ellipsis-v {
    margin-top: 5px;
    margin-left: 40px;
    cursor: pointer;
}

.dropbtn {
    background-color: white;
    color: white;
    padding: 16px;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    position: absolute;
    background: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: rgb(241, 234, 234)
}
</style>

额外提示：你的DisplayNotes.vue中循环渲染的卡片也用了固定id="blur"，同样会存在id重复问题，后续操作卡片模糊效果时也建议改用ref或者状态控制，避免出现和下拉框一样的串状态问题。

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