如何动态添加/编辑 vue-bootstrap 标签？

Question

我正在尝试创建具有单独 ID 的组件。我使用 vue-bootstrap 最小化按钮的地方。 <i class="material-icons m-1" v-b-toggle.collapse-componentID> minimize </i> 中的组件ID 应根据给定的数字进行更改。如果 componentID 为“1”，则应呈现为“v-b-toggle.collapse-1”，id="collapse-componentID" 为 id="collapse-1"。

我尝试动态使用类绑定。因为“v-b-toggle.collapse-componentID”不是一个不能工作的类。谁能帮我解决这个问题？

<div>
  <b-jumbotron class="canvaArea">
    <div class="btn-min-close">
      <i class="material-icons m-1" v-b-toggle.collapse-componentID> minimize </i>
      <i class="material-icons" @click="deleteAllElement"> close </i>
    </div>
  <!-- v-b-toggle.collapse-componentID -->
    <b-collapse visible id="collapse-componentID">
      <formContainer/>
    </b-collapse>
  </b-jumbotron>
  <i @click="addComponent" class="material-icons">add_circle</i>
</div>

Answer 1

对于id 属性，您可以简单地使用模板文字：

 <b-collapse visible :id=`collapse-${componentID}`>

对于引导组件的其他属性，您可能需要创建自定义指令：

var componentsLength = 4;
for (let i = 1; i <= componentsLength; i++) {
  Vue.directive(`b-toggle-collapse-${i}`, {
    inserted: function(el) {
      // When the bound element is inserted into the DOM...
      // add styles here ...i will change bg color for instance
      var colors = ['red', 'skyblue', 'orange', 'white'];
      el.style.backgroundColor = colors[i - 1]
    }
  })
}

new Vue({el:"#app"})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-b-toggle-collapse-1>button1</button>
  <button v-b-toggle-collapse-2>button2</button>
  <button v-b-toggle-collapse-3>button3</button>
  <button v-b-toggle-collapse-4>button4</button>
</div>

阅读有关自定义指令的更多信息：https://vuejs.org/v2/guide/custom-directive.html