如何为v-for渲染的单个按钮添加额外点击事件？

先补全你代码里的两个必要修正：

• 把data里的component: "button[0].name"改成component: this.buttons[0].name（或者直接写"BorderLeftComonent"），否则初始组件无法正确渲染
• 在data里添加isOpen: false，因为toggleShowPopup方法依赖这个属性

下面提供两种实现方式，按需选择：

方式一：模板内直接判断按钮类型 #

修改模板中的@click事件，当按钮type为border-left时额外调用toggleShowPopup：

<template>
  <div id="btn-box">
    <button
      v-for="(button, index) in buttons"
      :key="index"
      :class="button.isActive ? 'on' : 'off'"
      @click="
        component = button.name;
        activeBtn($event, index);
        if (button.type === 'border-left') toggleShowPopup();
      "
    >
      <div :class="`btn btn-${button.type}`">{{ button.label }}</div>
    </button>
  </div>
</template>

方式二：统一处理点击逻辑（更推荐，代码更整洁） #

新增一个统一的点击处理方法，把所有逻辑集中到方法内部：

<script>
import Vue from "vue";
import BorderLeftComonent from "./BorderLeftComonent.vue";
import TextBalloonComponent from "./TextBalloonComponent.vue";
import DashedComponent from "./DashedComponent.vue";
export default Vue.extend({
  data() {
    return {
      component: this.buttons[0].name, // 修正初始值
      color: "",
      isOpen: false, // 添加isOpen属性
      buttons: [
        {
          label: "A",
          isActive: false,
          type: "border-left",
          name: "BorderLeftComonent",
        },
        {
          label: "A",
          isActive: false,
          type: "text-balloon",
          name: "TextBalloonComponent"
        },
        {
          label: "A",
          isActive: false,
          type: "dashed",
          name: "DashedComponent"
        },
      ],
    };
  },
  methods: {
    toggleShowPopup() {
      this.isOpen = !this.isOpen;
    },
    activeBtn(index) { // 简化方法，移除未使用的event参数
      this.buttons[index].isActive = !this.buttons[index].isActive;
    },
    handleButtonClick(button, index) {
      // 切换当前组件
      this.component = button.name;
      // 切换按钮激活状态
      this.activeBtn(index);
      // 仅border-left类型按钮触发弹窗方法
      if (button.type === 'border-left') {
        this.toggleShowPopup();
      }
    }
  },
  computed: {
    currentComponent() {
      return this.component;
    },
    cssVars() {
      return {
        '--border-left': this.color,
      }
    }
  },
});
</script>

<template>
  <div id="btn-box">
    <button
      v-for="(button, index) in buttons"
      :key="index"
      :class="button.isActive ? 'on' : 'off'"
      @click="handleButtonClick(button, index)"
    >
      <div :class="`btn btn-${button.type}`">{{ button.label }}</div>
    </button>
  </div>
</template>

两种方式都能实现需求，方式二更利于后续功能扩展，逻辑也更集中。

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