Within my code, I am dynamically creating numerous elements on the server side. I store the HTML of these elements in a JavaScript object, remove them, and then conditionally add them to various parts of the page.
There is one specific element for which I desire data binding so that I can reference that binding in a v-if directive. However, when I add the v-bind on the server side, it gets lost after I copy the HTML.
Since I am only adding the elements in my JavaScript code, I am unable to register the v-bind in my template. Additionally, providing the content in a component is not an option since it is dynamic and relies on input from the server.
How can I properly register the binding?
Here is some sample code:
Dynamically generated form elements (server side):
<div id="archive" style="display: none;">
<div><input type="text" name="purpose" v-bind:value="purpose" id="id_purpose"></div> <!-- v-bind has no effect -->
<div><input type="text" name="purpose__iexact" id="id_purpose__iexact"></div>
<div><input type="text" name="purpose__contains" id="id_purpose__contains"></div>
<div><input type="text" name="purpose__icontains" id="id_purpose__icontains"></div>
<div><input type="text" name="purpose__in" id="id_purpose__in"></div>
...
</div>
Script to copy the HTML:
var input = {};
var archive = document.getElementById('archive');
for(var i = 0; i < archive.children.length; i++) {
var div = archive.children[i];
input[div.firstChild.name] = div.innerHTML
}
archive.parentNode.removeChild(archive);
Template code to display a certain input field dynamically (client side):
<div class="inline" v-html="input[SOME CONDITIONAL COMPUTATIONS]"></div>