Combobox es bastante simple:

<template>
   <v-combobox
   clearable
   v-model="values"
   :items="items"
   ></v-combobox>
</template>

<script>
data () {
    return {
        items: [
            {"id": 2, "name": "tree"},
            {"id": 4, "name": "grass"},
            {"id": 5, "name": "freeze"},
            {"id": 9, "name": "moss"}
        ],
        values: ''
    }
}
</script>

Lo que quiero lograr es pasar solo los name s como elementos de cuadro combinado.

Las entradas como :items="items.name" o :items="c.name in items" no funcionan; dejarlo como está hace que se muestren [object Object] s.

Además de mostrar solo los name s, ¿es posible conservar el objeto completo (name y id) en el modelo values en la selección de elementos?

0
AbreQueVoy 25 ago. 2020 a las 16:25

2 respuestas

La mejor respuesta

Según los documentos, debe utilizar item-text, {{ X1}} y return-object accesorios para v-combobox, como este:

<v-combobox
  clearable
  v-model="values"
  ::items="items"
  item-text="name"
  item-value="id"
  return-object
></v-combobox>

La propiedad item-text es el nombre de la propiedad que se mostrará en el cuadro combinado. item-value es la propiedad del objeto que se utilizará como valor. return-object indica que una selección debe devolver el objeto que representa, en lugar de su valor (item-value).

La propiedad return-object es true de forma predeterminada, por lo que puede excluirla si lo desea. El valor predeterminado para item-value es value y item-text es text. Entonces, si sus elementos tuvieran propiedades value y text en lugar de id y name, funcionaría como se esperaba sin tener que especificar esos accesorios.

1
Matt U 25 ago. 2020 a las 13:32

Puede comprobar los parámetros que recibe el componente en la sección API del componente. En su caso, debe agregar item-text y item-value en su cuadro combinado

<v-combobox
   clearable
   v-model="values"
   :items="items"
   item-text="name"
   item-value="id"
></v-combobox>

        
1
markcc 25 ago. 2020 a las 13:36