Question

我有一个选择，它动态地填充了vehiculos_usuarios信息，该数组包含对象，其值显示在v-select中。

我该怎么做预定义 v-select中的值并同时执行功能@change="vehiculoSeleccionado"？仅当更改选择内容时才执行此功能，这不是我想要的。

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

通过这种方式，您可以看到：

基本上我希望在启动视图时，select从vehiculos_usuarios信息中包含一个预定义值，并且应该看起来像这样，同时执行函数vehiculoSeleccionado

非常感谢您。

Answer 1

您缺少v-model，该v-model应该包含示例中所选的值。

要解决发生在您身上的问题，您可以做的是使vehiculoSeleccionado (vModelSelect)等于您要默认显示的元素，并在创建视图时在created hook for vue中，您可以通过默认为<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>

的v模型触发函数

它看起来像这样(snippet here)。

Tesseract

您可以从vuetify团队了解如何为选择https://vuetifyjs.com/en/components/selects#customized-item-text-and-value

提供默认值

如何为v-select，vuetify，vuejs设置动态值？

1 个答案: