Hi I'm new to vue and I'm trying to complete one task. I have dynamic component toggles which I render with v-for. Can you suggest how can I pass an extra click to only one button (button 'border-left')? Desirable illustrative examples

<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: "button[0].name",
            color: "",
            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(event, index) {
          this.buttons[index].isActive = !this.buttons[index].isActive;
    }
    },

    computed: {
      currentComponent() {
        return this.component;
      },
      cssVars() {
        return {
          '--border-left': this.color,
        }
      }
    },
</script>

template is presented here

<template>
      <div id="btn-box">
        <button
          v-for="(button, index) in buttons"
          :key="index"
          :
          @click="component = button.name, activeBtn($event, index)">
        <div :>{{ button.label }}</div>
      </button>
      </div>
</template>

the method i need to pass to only one button

toggleShowPopup() {
            this.isOpen = !this.isOpen;
        }

CodePudding user response：

You need conditional event binding. Try this:

<button
   v-for="(button, index) in buttons"
   :key="index"
   :
   @click="component = button.name, activeBtn($event, index), button.type === 'border-left' && toggleShowPopup()">
   <div :>{{ button.label }}</div>
</button>

CodePudding user response：

This way might be a little more cleaned-up:

        //import BorderLeftComonent from "./BorderLeftComonent.vue";
        //import TextBalloonComponent from "./TextBalloonComponent.vue";
        //import DashedComponent from "./DashedComponent.vue";
/*export default */new Vue/*.extend*/({
    el: '#container',
    template: `<div>
      <div id="btn-box">
        <button
          v-for="(button, index) in buttons"
          :key="index"
          :
          :data-index="index"
          @click="button.method">
        <div :`"}btn btn-${"$"}{button.type}${"`"}">{{ button.label }}</div>
      </button>
      </div>
</div>`,
    data() {
        return {
            component: "button[0].name",
            color: "",
            buttons: [
                {
                    label: "A",
                    isActive: false,
                    type: "border-left",
                    name: "BorderLeftComonent",
                    method: this.toggleShowPopup,
                },
                {
                    label: "A",
                    isActive: false,
                    type: "text-balloon",
                    name: "TextBalloonComponent",
                    method: this.handleClick,
                },
                {
                    label: "A",
                    isActive: false,
                    type: "dashed",
                    name: "DashedComponent",
                    method: this.handleClick,
                },
            ],
        };
    },
    methods: {
        toggleShowPopup(event) {
            this.isOpen = !this.isOpen;
            this.handleClick(event)
        },
        activeBtn(event) {
            index = event.currentTarget.dataset.index
            this.buttons[index].isActive = !this.buttons[index].isActive;
        },
        handleClick(event) {
          index = event.currentTarget.dataset.index
          button = this.buttons[index]
          this.component = button.name;
          this.activeBtn(event)
        },
    },

    computed: {
        currentComponent() {
            return this.component;
        },
        cssVars() {
            return {
                '--border-left': this.color,
            }
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container"></div>