通过Vue bootstrap点击VueJS 2中的图像来触发引导程序组件

Question

原标题：带Bootstrap的VueJS，带隐藏按钮的拉伸链接

我正试图在VueJS项目中制作可点击的引导卡，我想点击该卡打开卡中的可折叠元素，现在我有了一个可以使用带有"；拉伸链接"；类

<b-card 
v-bind:img-src="`https://via.placeholder.com/200`"
img-alt="Image" 
img-top 
tag="article" 
style="max-width: 20rem;" 
class="mb-2">

<b-button v-b-toggle="'collapse-'  + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
<b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
<b-card>This is the collapsed content</b-card>
</b-collapse>
</b-card>

我试图在卡片上没有可见按钮的情况下实现这一点，我尝试过使用invisible类和d-none类(class="stretched-link d-none"和class="stretched-link invisible"(

在这两种情况下，按钮都是不可见的，但拉伸的链接也是不可见的。有没有办法在隐藏按钮图标的同时保持活动的拉伸链接区域？

Answer 1

好的，我用JQuery、为我的特定用例找到了一个解决方案

我真正想要的是一个具有引导按钮功能的可点击图像。因此，这是一个解决这个问题的方法，而不是完全隐藏的拉伸链接。

在我的Vue组件中，我定义了triggerButton方法，该方法通过id找到按钮并单击它

<script>
import $ from 'jquery'
export default {
props: //just filling this for structure,
data() {
return {
//stuff
}
},
async mounted() {
//more placeholder structure
},
methods: {
//here is the sauce
triggerButton(id) {
$("#"+id).click();
},
}
}
</script>

然后在<template>主体中，我有一个隐藏的按钮"唯一标识符"；只是一个唯一的数字，在我的情况下需要它，因为我在for循环中生成了许多这样的元素，它们需要有不同的id。

在这种情况下，我使用引导按钮来触发一个独特的模式。

<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>

最后，我在引导卡中显示了一个图像，点击后我调用triggerButton方法，该方法现在将显示我的模态。

<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>