Caso : estoy usando PrimeVue en un proyecto Vue.js En este caso, tengo un menú desplegable, como un componente de PrimeVue , que usa una matriz de objetos. El componente desplegable se ve así:
<template #position> <Dropdown class="multiselect-fullsize" v-model="selectedFilter[index].pos" :options="filterPositions" optionLabel="name" placeholder="Position" /> </template> Este componente desplegable tiene una propiedad :options , que hace referencia a la siguiente matriz:
filterPositions: [ {"name": "0", "value": "0"}, {"name": "1", "value": "1"}, {"name": "2", "value": "2"}, {"name": "3", "value": "3"}, {"name": "4", "value": "4"}, {"name": "5", "value": "5"}, {"name": "6", "value": "6"}, {"name": "7", "value": "7"}, {"name": "8", "value": "8"} ] Pregunta : ¿Hay alguna forma de especificar un elemento preseleccionado en este menú desplegable de PrimeVue ?
Editar: según la documentación , no hay ninguna propiedad para definir un elemento preseleccionado. Entonces, tal vez, si hay una solución, podría ser solo JavaScript .
¡La respuesta es sí! La descripción en la documentación de Dropdown | PrimeVue es un poco confuso, al menos para mí. El problema es que no es suficiente proporcionar un v-model como lo hice con v-model="selectedFilter[index].pos" , también tengo que definir optionValue y en mi caso optionValue="value" , porque los valores en filterPositions tienen el value clave.
Parece que, si esto está configurado, el menú desplegable de PrimeVue puede verificar si el v-model coincide con el valor de la optionValue . De lo contrario, v-model se compararía con todo el elemento filterPositions . Por ejemplo:
Sin optionValue="value" :
{"name": "4", "value": "4"} === 4 Con optionValue="value" :
4 === 4Entonces, mi componente desplegable en este caso debe verse así:
<Dropdown class="multiselect-fullsize" v-model="selectedFilter[index].pos" :options="filterPositions" optionLabel="name" optionValue="value" placeholder="Position" />selectedFilter[index].pos = {"name": "4", "value": "4"}
simplemente establezca el valor del marcador de posición en el valor preseleccionado
<Dropdown class="multiselect-fullsize" v-model="selectedFilter" :options="filterPositions" optionLabel="name" optionValue="value" :placeholder="selectedFilter.value" />