原生JavaScript+Vue实现按钮文本切换及容器隐藏问题求助

现有代码的核心问题 #

• 重复绑定事件：每次点击按钮执行changeTab时，都会给deleteCoholder元素添加新的点击事件，多次点击后会触发多次回调，导致逻辑混乱。
• 事件冒泡：点击垃圾桶图标时，事件会冒泡到父级按钮，触发按钮的@click="changeTab"，刚把按钮文本改成"AÑADIR COTITULAR"，又会被changeTab改回"COTITULAR 1"加图标。
• 违背Vue数据驱动原则：直接用原生DOM操作修改内容，和Vue的响应式机制冲突，容易出现数据和视图不一致的问题。

正确的Vue实现方式 #

完全用Vue的数据绑定控制视图，避免原生DOM操作：

模板部分

<button 
  class="nav-link" 
  id="coholder-tab" 
  data-toggle="tab" 
  data-target="#coholder" 
  type="button" 
  role="tab" 
  aria-controls="coholder" 
  :aria-selected="!isCoholderAdded"
  @click="handleTabClick"
>
  {{ isCoholderAdded ? 'COTITULAR 1' : 'AÑADIR COTITULAR' }}
  <i 
    v-if="isCoholderAdded"
    class="fa fa-1x fa-trash ml-3 deleteCoholder" 
    aria-hidden="true"
    @click.stop="removeCoholder"
  ></i>
</button>

<div 
  id="coholder_container"
  v-show="isCoholderAdded"
>
  <!-- 容器内容 -->
</div>

脚本部分

export default {
  data() {
    return {
      isCoholderAdded: false
    }
  },
  methods: {
    handleTabClick() {
      if (!this.isCoholderAdded) {
        this.isCoholderAdded = true;
      }
    },
    removeCoholder() {
      this.isCoholderAdded = false;
    }
  }
}

关键改进点 #

• 数据驱动视图：用isCoholderAdded响应式变量控制按钮文本、图标显示和容器的隐藏/显示，完全避免原生DOM操作。
• 阻止事件冒泡：给垃圾桶图标添加@click.stop，防止点击图标时触发父按钮的点击事件，避免逻辑冲突。
• 无重复事件绑定：事件绑定直接在模板中完成，不会重复添加回调。

原生JS修正方案（不推荐） #

如果必须保留原生操作，需解决冒泡和重复绑定问题：

const changeTab = () => {
  const tabText = document.getElementById("coholder-tab");
  const coholder_container = document.getElementById("coholder_container");
  const icon = '<i class="fa fa-1x fa-trash ml-3 deleteCoholder" aria-hidden="true"></i>';
  
  tabText.innerHTML = "COTITULAR 1 " + icon;
  coholder_container.classList.remove('d-none');

  const trash = document.querySelector('.deleteCoholder');
  trash.removeEventListener('click', handleTrashClick);
  trash.addEventListener('click', handleTrashClick);
}

function handleTrashClick(e) {
  e.stopPropagation();
  const tabText = document.getElementById("coholder-tab");
  const coholder_container = document.getElementById("coholder_container");
  
  tabText.innerHTML = 'AÑADIR COTITULAR';
  coholder_container.classList.add('d-none');
}

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