Initialize a Vue object after dynamic DOM creation

itsgoofer commented 9 years ago

Hi Guys,

I have a very simple Vue object in a page (input and div) and a link that opens up a modal window. The modal window takes its contents from an element on the page. In this case, when the modal fires up, it takes a copy of the HTML containing the Vue object and places it in the modal's body:

<section class="#content">
    <div id="vueApp">
        <div>{{title}}</div>
        <input type="text" v-model="title">
    </div>
</section>

<a href="#" data-modal data-modal-localElement="#content">Open</a>

var v = new Vue({
    el: "#vueApp",
    data: {
        title: "The title"
    }
})

The modal, once pops up will contain the following:

<div id="vueApp">
    <div>{{title}}</div>
    <input type="text" v-model="title">
</div>

In the modal, the vue modal gets disconnected, so updating the input doesn't change the contents in the div (title). Is there anyway to rebind those together?

Thanks in advance.

itsgoofer commented 9 years ago

Anyone?

young-steveo commented 9 years ago

@omarfouad Can you make a jsfiddle demonstrating the behavior for us to debug?

vuejs / Discussion

Initialize a Vue object after dynamic DOM creation #380