Vue js 和克隆组件

Posted 2023-02-22

【中文标题】Vue js 和克隆组件

【英文标题】：Vue js and cloned components

【发布时间】：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 实例化另一个，看看结果如何

【参考方案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' );