Question

我在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>

Answer 1

最后，经过一些研究，我找到了解决方案。在组件注册中添加默认设置可解决此问题：

components: {
            autocomplete: Vue2Autocomplete.default
        },

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

导入了VueJs2自动完成功能，但不起作用

1 个答案: