Question

我正在尝试创建具有单个ID的组件。我在哪里用vue-bootstrap最小化按钮。在<i class="material-icons m-1" v-b-toggle.collapse-componentID> minimize </i>中，应根据给定的编号更改componentID。如果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

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

1 个答案: