VueJs2自动完成导入但不起作用

Posted 2023-02-23

【中文标题】VueJs2自动完成导入但不起作用

【英文标题】：VueJs2 Autocomplete imported but not working

【发布时间】：2019-10-06 20:31:19

【问题描述】：

我在 Laravel+VueJs 中有一个小型 Web 项目，现在我将它从 VueJs 1.x 迁移到 2。vue-migration-helper 一切都很好，但我的问题在于 vuejsautocomplete 组件。我在谷歌上搜索到 VueJs2 有一个基于 vuejsautocomplete 的 vuejs2autocomplete 库，所以我导入了它，然后使用它，但 mi 自动完成输入无法正常工作。

这是我的 Vue 对象

        var cadApp = new Vue(
            el: '#cadContainer',
            data: 
                inputPrestadorEfector: '',
                frmAfiliado: 
                    inputNumeroAfiliado: '',
                    inputDocumentoAfiliado: '',
                    inputTipoDocumentoAfiliado: '',
                ,
                dataAfiliado: 
                    msje:'',
                    contextualClass:'',
                    idUnico:'',
                ,//resultado de la consulta
                //prestaciones
                frmPrestaciones : 
                    inputPrestacionCodigo :'',
                    inputPrestacionDescripcion :'',
                ,
                dataPrestacion: 
                    msje:'',//no viene en la consulta
                ,//resultado de la consulta
                dataPrestaciones: !! json_encode(old('dataPrestaciones') ?: []) !!,//lista de prestaciones consultadas
                //solicitudes
                frmSolicitud:

                ,
                dataSolicitud: !! json_encode(old('dataSolicitud') ?: ['idSolicitud'=>0, 'msje'=>'', 'contextualClass'=>'']) !!,
//                
//                    idSolicitud:0,//0 indica que la solicitud no fue creada
//                    msje:'',
//                    contextualClass:'',
//                ,//resultado de la consulta
                solicitudes: [],
                loading: false,
                error: false,
                query: ''
            ,
            components: 
                autocomplete: Vue2Autocomplete
            ,
            methods: 
......
......

这就是我使用自动完成组件的方式（至少在它工作的第一个版本中）

<div class="input-group-addon">Código:</div>
                        <autocomplete
                                class="form-control"
                                name="inputPrestacionCodigo"
                                placeholder="Código práctica"
                                url="prestacion/codigo"
                                param="CODIGO_PRESTACION"
                                min="2"
                                max="9"
                                limit="50"
                                anchor="CODIGO_PRESTACION"
                                model="frmPrestaciones.inputPrestacionCodigo">
                        </autocomplete>

Vuedevtools 识别两个自动完成组件，但在浏览器控制台中我得到：

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Autocomplete>
       <Root>

【问题讨论】：

请不要发布那么多代码行，只发布重要的部分。没有人会以其他方式看待它。 :)

您可能需要告诉我们究竟什么是行不通的。有什么错误吗？

发布更新...

【参考方案1】：

经过一番研究，我终于找到了解决方案。 向组件注册添加默认值解决了问题：

components: 
            autocomplete: Vue2Autocomplete.default
        ,

希望它也可以帮助其他人。