按下按钮后，Vue.js 会动态呈现 bootstrap-vue 组件

Question

I have this as part of my template

 <button class="add" v-on:click="handleAdd(0)"><img id="0" src="../assets/plus.svg" /></button> <div class="objectives-list"> <div class="objective-holder" id="0"> <b-button vb-toggle.ld-0 class="objective"> <div class="short-description">I am a short description.</div> <b-collapse class="long-description" id="ld-0" @show="handleShow(0, 0, 0)" @hide="handleHide(0, 0, 0)">I am a long description.</b-collapse> </b-button> </div> </div>

I am trying to add a new "objective-holder" to the "objective-list" and I am having trouble figuring out how to create new b-button and b-collapse from BootstrapVue in a javascript function that is part of my .vue methods functions.

Answer 1

You might be able to use a render function instead of a template, or some type of component utilizing a render function to programmatically create your button element. https://v2.vuejs.org/v2/guide/render-function.html#ad