Как визуализировать и привязывать данные к субкомпоненту в строку шаблона
У меня есть компонент в моем 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 и лист тимьяна