尝试使用javascript'；s函数对象将字符串转换为Vue.js组件

我的后端将Vuejs组件作为字符串提供服务。我正在使用以下代码将此字符串转换为对象：

let initializeForm = Function(`return ${template}`)();

当我在控制台中检查变量时，它看起来是正确的。我可以检查各种方法和生命周期挂钩。但是，当我试图通过chrome的copy（）方法复制对象时，components对象和methods对象是空的

尝试装载组件失败。您有没有想过会出现什么问题，或者有没有更好的方法来装载经过字符串化的vuejs组件？下面是一个示例字符串：

{
    name: ‘SomeForm’,
    components: {
    },
    props: ['processDefinition', 'taskDefinition', 'variables'],
    computed: {
        taskId () {
            if (this.taskDefinition && this.taskDefinition._id) {
                return this.taskDefinition._id;
            } else {
                return 'startEvent';
            }
        }
    },
    watch: {
        formData: {
            handler: () => undefined,
            deep: true
        }
    },
    data () {
        return {
            formData: {},
            options: []
        };
    },
    methods: {
        setFormData () {
            var fName = "DynamicRoleRequest:setFormData():";

            this.formData = this.processDefinition.formProperties.reduce((acc, formProperty) => {
                if (this.variables && this.variables[formProperty._id]) {
                    return Object.assign(acc, { [formProperty._id]: this.variables[formProperty._id] });
                } else {
                    return Object.assign(acc, { [formProperty._id]: formProperty.type.name === 'boolean' ? false : '' });
                }
            }, {});
        },
        resetForm () {
            this.setFormData();
        },
        cancel () {
            this.resetForm();
            this.$emit('cancel');
        },
        submit () {
            var fName = "DynamicRoleRequest:submit():";

            let payload = this.formData;

            if (this.taskId === 'startEvent') {
                payload._processDefinitionId = this.processDefinition._id
            }

            this.$emit('submit', payload);
        },
        accept () {
            this.formData.decision = 'accept';
            this.submit();
        },
        reject () {
            this.formData.decision = 'reject';
            this.submit();
        }
    },
    created () {
        var fName = "DynamicRoleRequest:created():";
        var roles = [];
        var role = {};

        let anInstance = this.getRequestService();

        anInstance.get('endpoint/rolesavailableforuser')
        .then( (response) => {
            roles = response.data.result;

            for (var i = 0 ; i < roles.length ; i++) {
                role = roles[i];
                if (role.name !== "approvers" &&
                    role.name !== "Employees" &&
                    role.name !== "Contractors") {
                        this.options.push(role);
                }
            }

            this.options.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
            this.setFormData();

            return;
        })
        .catch( (response) => {
              return;
        });

        // this.setFormData();

        console.log(fName + "EXIT");
    },
    template: `
        <form class="container" :name="processDefinition._id">
            <div v-for="formProperty in processDefinition.formProperties" :key="formProperty._id" class="form-group row">
                <template>
                    <label class="col-md-3 col-form-label">Available Roles</label>
                    <div class="col-md-9">
                        <select
                            v-model="formData[formProperty._id]"
                            class="form-control"
                            name="RoletoProvision"
                            id="RoletoProvision">
                            <option v-for="option in options" v-bind:value="option._id">
                                {{ option.name }}
                            </option>
                        </select>
                    </div>
                </template>
            </div>

            <div class="form-group row justify-content-end">
                <template v-if="taskId !== 'startEvent'">
                    <div class="col text-right">
                        <b-button variant="outline-danger" @click="reject">Reject</b-button>
                        <b-button variant="primary" @click="accept">Accept</b-button>
                    </div>
                </template>
                <template v-else>
                    <div class="col text-right">
                        <b-button variant="outline-secondary" @click="cancel">Cancel</b-button>
                        <b-button variant="primary" @click="submit">Submit</b-button>
                    </div>
                </template>
            </div>
        </form>
    `
}

{
名称：“某物”，
组成部分：{
},
道具：['processDefinition'，'taskDefinition'，'variables']，
计算：{
taskId（）{
if（this.taskDefinition&&this.taskDefinition.\u id）{
返回此.taskDefinition.\u id；
}否则{
返回“startEvent”；
}
}
},
观察：{
表格数据：{
处理程序：（）=>未定义，
深：是的
}
},
数据（）{
返回{
formData:{}，
选项：[]
};
},
方法：{
setFormData（）{
var fName=“dynamicrolerrequest:setFormData（）：”；
this.formData=this.processDefinition.formProperties.reduce（（acc，formProperty）=>{
if（this.variables&&this.variables[formProperty.\u id]）{
返回Object.assign（acc，{[formProperty.\u id]：this.variables[formProperty.\u id]}）；
}否则{
返回Object.assign（acc，{[formProperty.\u id]：formProperty.type.name==='boolean'？false:'}）；
}
}, {});
},
重置表单（）{
这是.setFormData（）；
},
取消（）{
这是resetForm（）；
此.$emit（'cancel'）；
},
提交（）{
var fName=“dynamicrolerrequest:submit（）：”；
让有效载荷=this.formData；
如果（this.taskId==='startEvent'）{
有效负载.\u processDefinitionId=此.processDefinition.\u id
}
此.$emit（'submit'，有效载荷）；
},
接受（）{
this.formData.decision='accept'；
这个。提交（）；
},
拒绝（）{
this.formData.decision='reject'；
这个。提交（）；
}
},
创建（）{
var fName=“dynamicrolerrequest:created（）：”；
var角色=[]；
var角色={}；
设anInstance=this.getRequestService（）；
anistance.get（'endpoint/rolesavailableforuser'）
。然后（（响应）=>{
角色=response.data.result；
对于（变量i=0；i（a.name>b.name）？1:（（b.name>a.name）？-1:0）；
这是.setFormData（）；
返回；
})
.catch（（响应）=>{
返回；
});
//这是.setFormData（）；
console.log（fName+“EXIT”）；
},
模板：`
可用角色
{{option.name}
拒绝
接受
取消
提交
`
}

您已经看过了吗？此外，Vue文档有一个专门的异步组件部分-。如果您遵循了所有这些要求，但仍然无法正常工作，请确保已安装完整的Vue版本-从字符串编译Vue组件（例如，通过

模板
）需要它-请参阅。