简体   繁体   中英

Vue js and dynamic components and content

I want to implement Modal windows in VueJS for my project. As i always did in jQuery:

  • Get HTML of modal via AJAX (HTML is dynamic and backend makes it)
  • Append HTML code to BODY

But VueJS has different logic, and i cant really get how to create fully dynamic modal windows.

I can create Modal window component and append it to body, but i cant put HTML (that i got from AJAX request) inside component as template slot

<slot></slot>. 

So how can i do that? Maybe some best practices?

Thanks

将模式元素设置为您希望HTML内容具有属性v-html="modalContent" ,然后在您的vue代码中打开该模式时生成Ajax请求并将生成的HTML存储到this.modalContent

I solved it.

We need to put our modal component outside "#app" with needed html inside (Get it from AJAX) and initiate that instance as new vm.

And create wrapper to manage it like that

Modal = { show(), hide(), change() ... }

Of course hide method can destroy current modal window VM and whatever.

So after that we will have fully functional modal windows, hope that will help someone else.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM