Vue js 和克隆组件答案

【问题标题】：Vue js and cloned componentsVue js 和克隆组件
【发布时间】：2021-08-25 07:08:06
【问题描述】：

我有一个表单，其中包含由 Vue js 管理的 v-select 列表，我的应用程序中的所有选择都由该模块管理，其他输入字段是示例 html 字段。当我用 jquery 克隆表单时，我失去了选择中的所有操作单击。任何人都知道如何使用 jquery 添加从 v-select 克隆的 html 作为 Vue 组件？ vue select的管理方式如下：

    init: function () {
    const node = $('.custom-vue-select');

    if (node) {
        node.each(function (index) {
            let id = index;
            App.components['customVueSelect_' + id] = new Vue({
                'el': this,
                'mixins': [App.customVueSelect.mixins]
            });
            App.lazy(this, function () {
                App.components['customVueSelect_' + id] && App.components['customVueSelect_' + id].reset();
            });
        });
    }

    }

【问题讨论】：

呃……你为什么要混合使用 jQuery 和 Vue？这只是在为失败做准备。
是的，我同意，这是唯一由 vue js 管理的组件，在迁移此组件之前，如果 jquery 有一些想法，我需要？
如何克隆表单？您最好在表单中重新实例化 Vue 组件，而不是复制它们。
像这样： let $container= $('.container #content-' + $sectionType + "-" + $id).clone();
我会尝试删除 vue 生成的 html 并用 jquery 实例化另一个，看看结果如何

标签： jquery vue.js vuejs2 vue-component

【解决方案1】：

使用 jquery 有一个解决方案：替换 Vue js 生成的 DOM 并像这样创建另一个：

        let vuSelect = $('.v-select');
        if (vuSelect) {
            let id = vuSelect.attr('id'),
                template = `
                        <v-select class="form-control custom-combobox"
                              id="${id}"
                              name="${id}">
                        </v-select>
                        `;
            vuSelect.replaceWith(template);
           new Vue({ el: '#components-select' });
        }

【讨论】：