如何在 Vue.JS HTML 標簽中綁定動態 id

Question

我正在將 Bootstrap Vue 用於 UI 並嘗試通過此鏈接使用折疊

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

像vb-toggle.collapse-2和2是 id 我知道 & 靜態它很好，但我想根據數據庫記錄動態這個 id 像 DB id & 看看下面我正在嘗試這樣做

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

但{{data.id}}不起作用，它顯示的與{{data.id}}完全一樣。 如何在h3標簽中編譯變量data.id 。

謝謝

Answer 1

根據文檔， vb-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}'`;
    }
}

Answer 2

嘗試這個。

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

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

  <!-- Element to collapse -->
  <b-collapse id="collapse-2">
    <b-card>I am collapsible content!</b-card>
  </b-collapse>
</div>

代碼筆 - https://codepen.io/Pratik__007/pen/YzXxGQK

Answer 3

將 h3 標簽包裹在 div 或 span 中，並將該 div 的 innerHTML 設置為 h3 標簽的內容，但在函數內編譯。

const generateH3 = (id) => `<h3 v-b-toggle.collapse-${data.id}>Show</h3>` 
<div v-html='generateH3(data.id)'></div>