Home / Questions / 407454
Accepted
scorpions
Asked: 2021-11-18 03:50:54 +0800 CST 2021-11-18 03:50:54 +0800 CST

get selected option in datalist with vueJS

  • 772

I am creating a vueJS component which contains a dataList with dynamic options, since it is filled from the database. I need to get the value of the selected option, but I can't. Attached is the code of my component:

    <template>

    <div>
        <input list="usuarios" class="form-control mt-3">

        <datalist id="usuarios">

          <option v-for="data in usuarios" :val="data.id" @click="seleccionado($data.id)">{{data.nombre}}</option>

        </datalist>
    </div>

</template>

<script>
    export default {

        data() {
            return {
                usuarios: [],
            };

        },
        created: function () {
            this.cargar();
        },
        methods: {
            cargar: function () {
                let url = "/getUsers";
                axios
                    .get(url)
                    .then((response) => {
                        this.usuarios = response.data;
                    })
                    .catch((error) => console.error(error));
            },
            seleccionado: function(event){
                console.log(event.value);
            }
            
        },
    };
</script>
php

1 Answers

  1. Best Answer

    I think I have solved my problem, although I would like the name to appear and not the id, but hey:

    I have used v-on:input to call the function and in the function I get the selected value

    <template>

<div>
        <input list="usuarios" class="form-control mt-3" v-on:input="seleccionado">

        <datalist id="usuarios">

          <option v-for="data in usuarios" :value="data.id">{{data.nombre}}</option>

        </datalist>
    </div>

</template>

<script>
    export default {

        data() {
            return {
                usuarios: [],
                source: '',
            };

        },
        created: function () {
            this.cargar();
        },
        methods: {
            cargar: function () {
                let url = "/getUsers";
                axios
                    .get(url)
                    .then((response) => {
                        this.usuarios = response.data;
                    })
                    .catch((error) => console.error(error));
            },
            seleccionado: function(e){
                console.log("source = "+this.source+" new value = "+e.target.value);
            }
            
        },
    };
</script>
    • 0