Creé la aplicación Todo y usaré v-for loop para mostrar los tipos de prioridad como opciones de selección. Desafortunadamente, las opciones Baja, Media y Alta no se muestran. ¿Cómo puedo hacer que se muestren opciones bajas, medias y altas en la selección?
<template> <div class="addNewArea"> <div class="inputArea"> <div> <label for="titleInput">Title</label> <input type="text" id="titleInput" /> </div> <div> <label for="priorityType">Priority</label> <select v-model="priority" id="priorityType"> <option v-for="{ priorityType, idx } in priorityTypes" :key="idx" :value="priorityType.priorityType" > {{ priorityType.value }} </option> </select> </div> <div class="htmlWrapper"> <button>Confirm</button> </div> </div> </div> </template> <script> const priorityTypes = [ { priorityType: 1, value: 'Low' }, { priorityType: 2, value: 'Medium' }, { priorityType: 3, value: 'high' }, ]; export default { data() { return { priorityTypes: priorityTypes, priority: 1, }; }, method: {}, }; </script>cuando cambio a
<option v-for="{ priority, idx } in priorityTypes" :key="idx" :value="priority.priorityType" > {{ priority.value }} </option>esto muestra un error. [Advertencia de Vue]: error en el procesamiento: "TypeError: no se pueden leer las propiedades de undefined (leyendo 'priorityType')"
Como Robin mencionó en su respuesta, la sintaxis de v-for no es correcta. Use (priorityType, idx) en lugar de {priorityType, idx} .
Demostración de trabajo:
new Vue({ el: '#app', data: { priorityTypes: [ { priorityType: 1, value: 'Low' }, { priorityType: 2, value: 'Medium' }, { priorityType: 3, value: 'high' }, ], priority: 1, } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="addNewArea"> <div class="inputArea"> <div> <label for="titleInput">Title</label> <input type="text" id="titleInput" /> </div> <div> <label for="priorityType">Priority</label> <select v-model="priority" id="priorityType"> <option v-for="(priorityObj, idx) in priorityTypes" :key="idx" :value="priorityObj.priorityType" > {{ priorityObj.value }} </option> </select> </div> <div class="htmlWrapper"> <button>Confirm</button> </div> </div> </div> </div>para v-for v-for="(priorityType, idx) in priorityTypes" esto podría resolver su problema.