Intentando mostrar múltiples opciones en Vue2 para el bucle de una selección.
Dado un objeto con la estructura;
sorting = { name: [ 'asc', 'desc' ], price: [ 'cheapest', 'expensive' ] }Cómo formatear el bucle para obtener la salida de;
<select> <option value="name:asc">name asc</option> <option value="name:desc">name desc</option> <option value="price:cheapest">name cheapest</option> <option value="price:expensive">name expensive</option> </select>No se puede encontrar la forma de mostrar la segunda opción;
<select id="sortBy" class="form-control pr-3" v-model="sortBy"> <option v-for="(options, sort) in sorting" :key="`${sort}`" v-bind:value="`${sort}:${options[0]}`" > {{ sort }} {{ options[0] }} </option> </select>Esto se debe a que sus datos de sorting contienen matrices anidadas: debe iterar a través de cada clave (lo ha hecho), y también iterar a través de la matriz en cada clave para generar las opciones.
Mi sugerencia es que, en lugar de tratar de hacer eso en la plantilla, que puede ser detallada y menos legible... puede abstraer eso en una propiedad computada que maneje la generación de opciones por usted.
El truco aquí es simplemente usar Object.entries() (que devuelve una key y una tupla de value ) y luego iterar a través del valor para devolver la combinación key:arrayValue . Use Array.prototype.flatMap para aplanar la matriz devuelta:
new Vue({ el: '#app', data: { sorting: { name: [ 'asc', 'desc' ], price: [ 'cheapest', 'expensive' ] }, sortBy: '', }, computed: { options() { return Object.entries(this.sorting).flatMap(([key, optionsByKey]) => { return optionsByKey.map(v => `${key}:${v}`); }); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select id="sortBy" class="form-control pr-3" v-model="sortBy"> <option v-for="(option, i) in options" :key="i" :value="option"> {{ option.replace(':', ' ') }} </option> </select> <br /><br /> Selected value: {{ sortBy }} </div>Utilice dos bucles de option .
<select id="sortBy" class="form-control pr-3" v-model="sortBy"> <option v-for="n in options.name" :key="`name:${n}`" :value="`name:${n}`" > name {{ n }} </option> <option v-for="p in options.price" :key="`price:${p}`" :value="`price:${p}`" > price {{ p }} </option> </select>