How to set a dynamic value to a v-select, vuetify, vuejs?

Question

I have a select that gets dynamically filled with the vehiculos_usuarios information, the array contains objects, whose values are shown in the v-select.

What can I do to predefine a value in the v-select and at the same time execute the function @change="vehiculoSeleccionado"? This function will only be executed when making a change in the select and that is not what I want.

<template>
    <v-flex xs12 sm6 d-flex>
      <v-select
        :items="vehiculos_usuario"
        label="Selecciona vehiculo"
        item-text="nombre"
        item-key="vehiculos_usuario"
        item-value="id"
        return-object
        @change="vehiculoSeleccionado"
       ></v-select>
    </v-flex>
</template>
<script>
export default {
  data() {
      return {
         vehiculos_usuario: [
            {
             id: "-L_UU2Ca0hEruJ8Yxwt2"
             idcategoria: "-LWPTMu1m4WYO1wzJFiv"
             nombre: "Mazda 2019 - PP223PRL"
             placa: "P223PRL"
            },
            {
             id: "-L_UYxSRD9_1rb02fp5X"
             idcategoria: "-LWPRsmK3uBYWGeixA8E"
             nombre: "Honda - Moto - CC222RRR"
             placa: "C222RRR"
            }
         ]
     }
  },
  methods:{
   vehiculoSeleccionado(val){
    console.log("Vehiculo Seleccionado");
    console.log(val);
   }
  }
}
</script>

In this way you can see:

Basically I want that when starting the view the select contains a predefined value, from the vehiculos_usuarios information and it should look like this, at the same time executing the function vehiculoSeleccionado

Thank you very much.

Probably answered here https://stackoverflow.com/questions/51392719/set-initial-vuetify-v-select-value — Matheus Valenza, Mar 13 '19 at 14:43
Possible duplicate of [Set initial vuetify v-select value](https://stackoverflow.com/questions/51392719/set-initial-vuetify-v-select-value) — Matheus Valenza, Mar 13 '19 at 14:43
Not fully, cause even though he was missing that also in the question, he wanted to trigger a function, which is a little more than just missing the value — Alejandro Vales, Mar 13 '19 at 15:08

score 1 · Accepted Answer · edited Jul 16 '22 at 02:45

You are missing a v-model which is the one that should contain the selected value for your example.

To fix the issue that is happening to you what you can do is make the v-model equal to the element that you want to display by default, and in the created hook for vue when the view is created, you can fire the function passing the v-model that is by default vehiculoSeleccionado (vModelSelect)

It could look something like this (snippet here).

<template>
    <v-flex xs12 sm6 d-flex>
        <v-select
                v-model="selectedItem"
                :items="vehiculos_usuario"
                label="Selecciona vehiculo"
                item-text="nombre"
                item-key="vehiculos_usuario"
                item-value="id"
                return-object
                @change="vehiculoSeleccionado"
        ></v-select>
    </v-flex>
</template>
<script>
    export default {
        data() {
            return {
                selectedItem: {
                    id: '-L_UU2Ca0hEruJ8Yxwt2',
                    idcategoria: '-LWPTMu1m4WYO1wzJFiv',
                    nombre: 'Mazda 2019 - PP223PRL',
                    placa: 'P223PRL',
                },
                vehiculos_usuario: [
                    {
                        id: '-L_UU2Ca0hEruJ8Yxwt2',
                        idcategoria: '-LWPTMu1m4WYO1wzJFiv',
                        nombre: 'Mazda 2019 - PP223PRL',
                        placa: 'P223PRL',
                    },
                    {
                        id: '-L_UYxSRD9_1rb02fp5X',
                        idcategoria: '-LWPRsmK3uBYWGeixA8E',
                        nombre: 'Honda - Moto - CC222RRR',
                        placa: 'C222RRR',
                    }
                ]
            }
        },
        methods:{
            vehiculoSeleccionado(val){
                console.log("Vehiculo Seleccionado");
                console.log(val);
            }
        },
        created() {
            this.vehiculoSeleccionado(this.selectedItem)
        }
    }
</script>

You can take a look at this from the vuetify team on how to give default values to the selects https://vuetifyjs.com/en/components/selects#customized-item-text-and-value

How to set a dynamic value to a v-select, vuetify, vuejs?

1 Answers1