admin管理员组

文章数量:1356566

In Vue.js, I have a var app = new Vue({...}); and I have a ponent Vueponent('myponent', ... where I can use such ponent without any issue by directly adding <myponent></myponent> in html. What I wish to do is to dynamically add those ponent on demand maybe after a button click or when some other such event takes place. In raw JS, I'd use document.createElement... when event fires and then do el.appendChild.. to add it into html. How would I do the same with Vue.js ?

I'm not doing anything fancy with node js. This is on a single html page with <script src=".js"></script> in the <head>.

In Vue.js, I have a var app = new Vue({...}); and I have a ponent Vue.ponent('myponent', ... where I can use such ponent without any issue by directly adding <myponent></myponent> in html. What I wish to do is to dynamically add those ponent on demand maybe after a button click or when some other such event takes place. In raw JS, I'd use document.createElement... when event fires and then do el.appendChild.. to add it into html. How would I do the same with Vue.js ?

I'm not doing anything fancy with node js. This is on a single html page with <script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script> in the <head>.

  • javascript
  • vue.js
  • vuejs2
Share Improve this question edited Jan 12, 2020 at 6:42 Robert C. Holland asked Jan 12, 2020 at 6:34 Robert C. HollandRobert C. Holland 1,8135 gold badges33 silver badges61 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

To do this the "Vue way" usually involves the use of v-if, v-for or <ponent>, depending on what you want to do:

  • Use v-if to conditionally show a ponent/element based on a condition.
  • Use v-for to render a list of ponents/elements.
  • Use <ponent> to render a dynamic ponent/element.

So to achieve what you described in your question, you can declare a boolean data property visible like this:

data() {
  return {
    visible: false
  }
}

and use it with v-if to control the visibility of a ponent in the template:

<myponent v-if="visible"></myponent>

This requires that <myponent> exist in the template upfront. If you don't know what kind of ponent you want to show, then you can either include each possibility in the template and display the one you want based on some condition:

<p1 v-if="p1Visible"></p1>
<p2 v-if="p2Visible"></p2>
<p3 v-if="p3Visible"></p3>

or you can use <ponent> together with another data property (p) which you can set to the name of the ponent you want to display:

<ponent v-if="visible" :is="p"></ponent>

What you described (document.createElement followed by el.appendChild) does not exist in Vue. Vue has a strict rendering mechanism which you need to work with; it isn't possible to dynamically instantiate ponents and stick them into the DOM randomly. Technically you can do p = new Vue() as an equivalent to document.createElement and then el.appendChild(p.$el), but that probably isn't what you want to do because you would be creating an independent Vue instance that you would have to manage manually with no easy way of passing data around.

本文标签： javascriptVuejs equivalent of appendChild to dynamically add new elementcomponentStack Overflow

版权声明：本文标题：javascript - Vue.js equivalent of appendChild to dynamically add new elementcomponent? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744045756a2581490.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。