I have a small web project in Laravel+VueJs and now I'm migrating it from VueJs 1.x to 2. Everything was good with the vue-migration-helper but my problem is with the vuejsautocomplete component. I googled that for VueJs2 there's a vuejs2autocomplete library based on vuejsautocomplete so I imported it, then used it but mi autocomplete inputs didn't work properly.
Here's my Vue object
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: {
......
......
And here's how i used the autocomplete component (at least with the first version it worked)
<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 recognizes both autocomplete components but in browser console i get:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Autocomplete>
<Root>