Tengo un menú desplegable que funciona bien con valores simples, pero acabo de intentar usar matrices como valores y ahora la entrada desplegable inicial está vacía.
He creado un REPL para ilustrar el problema. Como puede ver, también he intentado usar selected=... para seleccionar automáticamente la primera entrada, pero no funciona.
Lo único que se me ocurre es introducir otra propiedad para volver a los valores simples y luego extraer la matriz filtrando la matriz original, pero parece bastante engorroso. Me pregunto si hay otra forma más elegante que me estoy perdiendo.
¡Gracias de antemano!
Editar: Aquí el ejemplo de código como se sugiere:
<script> const availableFilters = [ { key: ['filterAll'], display: 'All Columns' }, { key: ['name1', 'name2' ], display: 'Entry Names' }, { key: ['ID1', 'ID2' ], display: 'Entry IDs' }, { key: ['name1'], display: 'Entry 1 Name' }, { key: ['ID1'], display: 'Entry 1 ID' }, { key: ['name2'], display: 'Entry 2 Name' }, { key: ['ID2'], display: 'Entry 2 ID' }, ]; const simpleAvailableFilters = [ { key: 'filterAll', display: 'All Columns' }, { key: 'name1', display: 'Entry 1 Name' }, { key: 'ID1', display: 'Entry 1 ID' }, { key: 'name2', display: 'Entry 2 Name' }, { key: 'ID2', display: 'Entry 2 ID' }, ]; let currentFilter = { key: ['filterAll'], value: "", code: 0 }; let simpleCurrentFilter = { key: 'filterAll', value: "", code: 0 }; </script> Dropdown with array values: <select bind:value={currentFilter.key}> {#each availableFilters as filter, i} <option selected={i === 0 ? 'selected' : ''} value={filter.key}>{filter.display} - {i}</option> {/each} </select> <span> Selected key: {currentFilter.key} </span> <br/> Simple Dropdown: <select bind:value={simpleCurrentFilter.key}> {#each simpleAvailableFilters as filter, i} <option value={filter.key}>{filter.display} - {i}</option> {/each} </select> <span> Selected key: {simpleCurrentFilter.key} </span>Prueba esto:
let currentFilter = availableFilters[0].key; y puede eliminar selected={i === 0 ? 'selected' : ''} de la option .
Simplemente reemplace
let currentFilter = { key: ['filterAll'], value: "", code: 0 };por
let currentFilter = availableFilters[0]; Aunque el objeto tiene exactamente la misma estructura, sigue siendo un objeto diferente al que está en la primera posición en la matriz. {} === {} // false Lo mismo se aplica a las matrices.
['filterAll'] === ['filterAll'] // false 'filterAll' === 'filterAll' // true currentFilter tendría entonces esta estructura
{key: *bindedValue*, display: 'All Columns'}Si desea extraer la matriz, debe acceder a la clave al establecer el valor inicial
let currentFilter = availableFilters[0].key;y cambiar el enlace en la opción
<select bind:value={currentFilter}>REPL Es genial tener una Repl, pero sería mejor incluir el código también, en caso de que la Repl se rompa...