如何为 v-select、vuetify、vuejs 设置动态值？答案

【问题标题】：How to set a dynamic value to a v-select, vuetify, vuejs?如何为 v-select、vuetify、vuejs 设置动态值？
【发布时间】：2019-03-13 14:10:53
【问题描述】：

我有一个用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>

这样可以看到：

基本上我希望在启动视图时选择包含一个预定义的值，来自vehiculos_usuarios 信息，它应该看起来像这样，同时执行函数vehiculoSeleccionado

非常感谢。

【问题讨论】：

可能在这里回答stackoverflow.com/questions/51392719/…
Set initial vuetify v-select value的可能重复
不完全，因为即使他在问题中也错过了这一点，但他想触发一个函数，这不仅仅是错过了价值
我还必须让函数运行

标签： vue.js vuetify.js

【解决方案1】：

您缺少一个v-model，它应该包含您的示例的选定值。

要解决发生在您身上的问题，您可以做的是使 v-model 等于您要默认显示的元素，并在创建视图时在 created hook for vue 中触发函数传递默认为vehiculoSeleccionado (vModelSelect)的v-model

它可能看起来像这样(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>

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

【讨论】：