Click here to Skip to main content
15,887,746 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900