如何使用v-for仅在一个元素上挂起单击

Question

嗨，我是vue的新手，正在努力完成一项任务。我有动态组件切换，我用v-for渲染。你能建议我如何只点击一个按钮("左边框"按钮(吗？理想的示例

<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>
<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)">
<div :class="`btn btn-${button.type}`">{{ button.label }}</div>
</button>
</div>
</template>

我只需要将方法传递给一个按钮

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

Answer 1

您需要条件事件绑定。试试这个：

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

Answer 2

这种方式可能会更干净一些：

//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"
:class="button.isActive ? 'on' : 'off'"
:data-index="index"
@click="button.method">
<div :class="${"`"}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>