0
712
Vistas¿Cuál es la forma correcta de usar v-select, item-text y item-value?
Esta es la respuesta de la API que llamo
desde otra vista.
Estoy almacenando el resultado de la API, digamos en result = []; .
Estoy creando una lista desplegable usando v-select con :items="result" .
¿Cómo debo escribir para item-text y item-value si quiero que services.name sea el texto que se muestra en la lista desplegable y services._id se almacenará en una variable usando v-model , services._id como item-value ?
Parece que no puedo descifrar estas propiedades anidadas.
2 Respuestas
Responde la pregunta0
Algo que puede hacer es recuperar todos los servicios de todos los subconjuntos a través de una propiedad computed .
¡Entonces solo tendrá una matriz de objetos (en lugar de una matriz de matrices a través de los servicios de propiedad) y puede especificar las propiedades item-text y item-value !
Aquí hay un ejemplo
new Vue({ el: "#app", vuetify: new Vuetify(), data: () => { return { currentItem: null, items: [{ services: [ {_id: 1,name: 'foo'}, {_id: 2, name: 'bar'} ] }, { services: [ {_id: 1,name: 'foo'}, {_id: 3, name: 'baz'} ] } ] } }, computed: { allServices(){ return this.items.reduce((acc, curr) => { curr.services.forEach(service => { if(!acc.find(x => x._id === service._id)) acc.push(service) }) return acc }, []) } } }) <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css" /> <div id="app" data-app> currentItem : {{currentItem}} <v-select v-model="currentItem" :items="allServices" item-text="name" item-value="_id"></v-select> </div>0
Puede utilizar las slots del v-select para personalizar los datos mostrados:
<v-select label="Services" v-model="customVar" :items="result" item-value="_id" item-text="name" return-object > <template v-slot:selection="data"> {{ data.item.name }} </template> <template v-slot:item="data"> {{ data.item.name }} </template> </v-select> También podría usar como se muestra arriba return-object :
Cambia el comportamiento de selección para devolver el objeto directamente en lugar del valor especificado con item-value
Para que pueda elegir qué variables usa del objeto seleccionado