0

Tengo un input text con typeahead que uso para buscar un usuario

introducir la descripción de la imagen aquí

Esto lo hago mediante un componente de vue, el template es:

<template>
    <div>
        <label for="">Buscar Usuario</label>
        <input type="text" class="form-control search-user" required="" placeholder="Usuario" autocomplete="off"/>
        <input type="hidden" name="id_user" required="" v-model="user"/>
    </div>
</template>


<script>
export default {
    data() {
        return {
            user: ''
        }
    },
    mounted() {
        $('.search-user').typeahead({
            source: function (query, result) {
                return $.post("/FinDraT/users/getUsersTypeAhead", {query: query}, function (data) {
                    return result(data);
                });
            },
            updater: function (item) {
               this.user = item.id;

                return item;
            }
        });
    }
}

El problema es que al seleccionar el usuario, en el método updater quiero setear el id en el input hidden que después lo uso para guardar el usuario en el modelo que me encuentro.

El input hidden probe con v-model:"user", :value="user" y ninguno me setea el valor

2 respuestas 2

2

El problema es el scope de javascript en el cual trabajas.

Al momento de usar function el código que se ejecutará en esa función tendrá su propio scope, que es diferente al entorno, para darte un ejemplo, esto es lo que se hacía antes:

function () {
    // main scope
    var self = this;
    function () {
        // second scope
        self === this; // false
        // como te das cuenta, aquí this es otro objeto
    }
}

Por este motivo no te funciona, para eso se crearon las arrow functions, las cuales nos permiten mantener el scope de la siguiente forma:

function () {
    var self = this;
    () => {
        self === this; // true
    }
}

ESTOS EJEMPLOS SON DEMOSTRATIVOS

Para tu caso, aplicaría de la siguiente forma:

mounted() {
    $('.search-user').typeahead({
        source: function (query, result) {
            return $.post("/FinDraT/users/getUsersTypeAhead", {query: query}, function (data) {
                return result(data);
            });
        },
        updater: (item) {
            this.user = item.id;
            return item;
        }
    });
}

Espero haberte ayudado.

0

Probablemente se deba a que no existe la función updater en la versión de typeahead.js que estas usando. Bootstrap recomiendo utilizar https://github.com/twitter/typeahead.js en su lugar.

Reemplazando a updater está typeahead:selected, se utiliza de la siguiente manera.

$('.search-user').typeahead({
  source: function (query, result) {
    return $.post("/FinDraT/users/getUsersTypeAhead", {query: query}, function (data) {
      return result(data);
    });
  }
})
.on('typeahead:selected', function(e, item) {
  this.user = item
});
3
  • 1
    Seguramente esta respuesta tampoco funcionará, ten en cuenta el scope en el cual estas trabajando, estas dentro de mounted() y al entrar al evento typeahead:select estás cambiando de scope, por lo cuál this deja de ser el objeto de vue, para solucionarlo usa arrow functions en su lugar el 8 nov. 2017 a las 20:47
  • Es como dice @GermanAlzate, no tuve en cuenta que estaba adentro del typeahead el 9 nov. 2017 a las 1:26
  • Lo anotare como respuesta el 9 nov. 2017 a las 2:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.