时间戳

首页 > 解决方案 > 如何在 Vue.JS HTML 标签中绑定动态 id

javascript - 如何在 Vue.JS HTML 标签中绑定动态 id

问题描述

我正在将 Bootstrap Vue 用于 UI 并尝试通过此链接使用折叠

https://bootstrap-vue.js.org/docs/components/collapse/#usage

就像我知道v-b-toggle.collapse-2的 id 并且2静态地很好，但我想根据 DB 记录动态这个 id，比如 DB id 看看下面我正在尝试这样做

<h3 v-b-toggle.collapse-{{data.id}}>Show</h3>

但{{data.id}}不工作它确切地显示了哪个喜欢{{data.id}}。我该怎么做才能编译标签data.id中的h3变量。

谢谢

标签： javascriptvue.js

解决方案

根据文档，该v-b-toggle属性接受字符串值的 JS 表达式，即：

<!-- Using value -->
<b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>

如果是这种情况，那么只需将方法绑定到它：

<h3 v-bind:v-b-toggle="getTarget(data.id)">Show</h3>

methods: {
    getTarget(id) {
        return `'collapse-${id}'`;
    }
}

推荐阅读