ngthtra Ответов: 0

Как визуализировать и привязывать данные к субкомпоненту в строку шаблона

У меня есть компонент в моем html-файле и строка шаблона (этот шаблон загружается из БД, и в нем есть какой-то субкомпонент).

когда я визуализирую этот шаблон для своего компонента,
Как я могу привязать данные из модели к субкомпоненту в строке шаблона?

С помощью приведенного ниже кода я не могу установить данные в опции субкомпонента: cus-option-label и cus-option-input.
Я не есть большой опыт работы на Vue.js и thymeleaf. пожалуйста, помогите мне исправить это дело.

Спасибо.

Мой код:

Компонент html-файла:
<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>


Строка шаблона:
<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: 
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
	}
});


Что я уже пробовал:

Я работаю над этим Vue.js и лист тимьяна

0 Ответов