如何獲取動態生成的VueJS組件以進行渲染

Question

我試圖將組件動態添加到vue模板中。 事情沒有按預期進行。

我有這個組成部分：

 Vue.component('form-x-text', { delimiters: ["[[", "]]"], template: ` <div v-if="_.indexOf(['text','email','tel','number','url','color'], fType) > 0" class="form-group" :class="{'has-error': errors.has(fName)}"> <label :for="fId">[[fLabel]]</label> <input v-validate="{ rules: parsedRule }" class="form-control" :type="fType" :name="fName" :id="fId" data-vv-delay="700"> <span class="field-error" v-show="errors.has(fName)"> [[ errors.first(fName) ]]</span> </div> `, props: { fType: { type: String, validation: function(value){ return _.indexOf(['text','email','tel','number','url','color'], value) > 0 }, required: true }, fName: { type: String, required: true }, fId: null, fLabel: null, fRule: null }, computed: { parsedRule: function(){ console.log(this.fRule); return JSON.parse(this.fRule); } } }) class FormX{ constructor(){ } static newForm(){ return JSON.parse(` { "node": "root", "child": [] } `) } static textInput(ftype, name, label, id, required = false){ let emailR = false; if (ftype == 'email'){ emailR = true; } return JSON.parse( ` { "node": "element", "tag": "form-x-text", "attr": { "f-type": "${ftype}", "f-name": "${name}", "f-label": "${label}", "f-id": "${id}" } } ` ) } } var builder = new Vue({ el: '#builder', delimiters: ["[[", "]]"], data: { blankTemplate: { node: 'root', child: [ { node: 'element', tag: 'div', attr: { id: '1', class: 'foo'}, child: [] }, workingTemplate: { content: {} }, primaryButton: {}, secondaryButton: {}, bForm: null, }, methods: { openFormDesigner: function(){ $('#formDesignerModal').modal('show'); this.primaryButton = {'show':false, 'text':'Save', 'spanstyle':'fa fa-floppy-o'}; this.secondaryButton = {'show':true, 'text': 'Close'}; }, addToFormCanvas: function(ftype){ if (!ftype){ console.log("You need to provide the type of the Form element"); }else if (ftype == 'email'){ this.bForm.child.push(FormX.textInput('email', 'mail1','mail1','mail1')); }else if (ftype == 'text'){ this.bForm.child.push(FormX.textInput('text', 'mail1','mail1','mail1')); }else if (ftype == 'number'){ this.bForm.child.push(FormX.textInput('number', 'mail1','mail1','mail1')); } }, jsonToHtml: function(jsono){ return json2html(jsono); }, getAttr: function(aobj){ return aobj } }, mounted: function(){ $('#vwr-panel > iframe').contents().find('body').css({"margin":"0 auto", "background-color":"#fff"}).html( json2html(this.blankTemplate)); }, created: function(){ this.bForm = FormX.newForm(); }, computed: { bFormHtml: function(){ return json2html(this.bForm) } }, filters: { capitalize: function(v){ return _.toUpper(v); } } }) 

當發生單擊時，我基本上會在vue實例中附加到數據對象。 然后，我使用json2html將此數據對象轉換為“ html”，這實際上是一個組件。

我希望該組件將被渲染，但是盡管我可以在檢查器中看到它，但它不會渲染。

我要使用<div v-html="bFormHtml"></div>插入組件

Answer 1

您是否嘗試過使用可變的<component>標簽？

HTML：

...
<component :is="componentId"></component>
...

JavaScript的：

...
data: {
    componentId: 'blank'
},
components: {
    'blank': {
        'template': '<div></div>'
    }
},
methods: {
    'updateComponent': function() {
        this.componentId = 'form-x-text'
    }
}
...

JsFiddle一個包含多個組件的示例。

我不確定它是否可以與您所擁有的完全兼容，但是它可能比嘗試注入HTML更好。