如何将子组件的数据呈现和绑定到模板字符串中 [英] How to render and binding data to sub component into a template string

问题描述

我的html文件和模板字符串上有一个组件（这个模板是从DB加载的，它有一些子组件）。



当我渲染这个模板到我的组件，

如何在模板字符串上将数据从模型绑定到子组件？



使用以下代码，我可以不要将数据设置为子组件的选项：cus-option-label和cus-option-input。

我对Vue.js和thymeleaf没有太多经验。请帮我解决这个问题。



谢谢。



我的代码：



html文件的组成部分：

< div class =area-general-wrapid =optForm> 
< form ref =optFormclass =frm-setth：object =$ {optForm}method =post> 
< cus-option-table class =tbl-frmrole =presentation
 th：input-html-text =$ {inputHtmlText}> 
< / cus-option-table> 
< / form> 
< / div> 

模板字符串：

< ;表> 
< 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代码：

 var faOptionTable = Vue.extend（{
模板：''，
方法：{
 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 {
返回this.template（）; 
} 
}，
 
挂载：function（）{
 this .changeTemplate（）; 
}，
组件：{
fa-option-label：faOptpionLabel，
fa-option-input：faOptpionInput 
} 
} ）; 

我的尝试：



我正在研究Vue.js和百里香叶

解决方案

{optForm}method =post>
< cus-option -table class =tbl-frmrole =presentation
th：input-html-text =

{inputHtmlText}>
< / cus-option-table>
< / form>
< / div>

模板字符串：

< table> 
< tr> 
< td>< cus-option-label th：option =

{option.get（'2'）}>< / cus-option-label>< / td>
< td>< cus-option-input个：选择=

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

解决方案

{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="

这篇关于如何将子组件的数据呈现和绑定到模板字符串中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！