I have a component on my html file and template string (this template is loaded from DB and it have some sub component into).
when I render this template to my component,
How to I can binding data from model to sub component on template string?
With below code, I can't set data to option of sub component: cus-option-label and cus-option-input.
I don't have a lot of experience on Vue.js and thymeleaf. please help me fix this case.
Thank you.
My code:
Component of html file:
<div class="area-general-wrap" id="optForm">
<form ref="optForm" class="frm-set" th:object="${optForm}" method="post">
<cus-option-table class="tbl-frm" role="presentation"
th:input-html-text="${inputHtmlText}">
</cus-option-table>
</form>
</div>
Template string:
<table>
<tr>
<td><cus-option-label th:option="${option.get('2')}"></cus-option-label></td>
<td><cus-option-input th:option="${option.get('2')}"></cus-optpion-input></td>
</tr>
</table>
js code:
var faOptionTable = Vue.extend({
template: '',
methods: {
changeTemplate: function() {
var template = faOptionTableDefaultTemplate;
if (this.actionType === "0" && this.inputLayoutHtmlText != null && this.inputLayoutHtmlText.trim() !== "") {
template = this.inputLayoutHtmlText;
} else if (this.actionType === "1" && this.confirmLayoutHtmlText != null && this.confirmLayoutHtmlText.trim() !== "") {
template = this.confirmLayoutHtmlText;
}
setTimeout(function() {
this.template = Vue.compile(template).render;
}.bind(this), 0);
}
},
render: function(createElement) {
if (!this.template) {
return createElement('div', 'Loading...');
} else {
return this.template();
}
},
mounted: function() {
this.changeTemplate();
},
components: {
"fa-option-label": faOptpionLabel,
"fa-option-input": faOptpionInput
}
});
What I have tried:
I am working on Vue.js and thyme leaf