I made Todo Application, and will use v-for loop to show priorityTypes as select options. Unfortunately, Low,medium,high options is not shown. How can I make Low,medium,high options showing in select?
<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>
when i change to
<option
v-for="{ priority, idx } in priorityTypes"
:key="idx"
:value="priority.priorityType"
>
{{ priority.value }}
</option>
this showing error. [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'priorityType')"
As Robin mentioned in his answer - Syntax for v-for is not correct. Use (priorityType, idx) instead of {priorityType, idx}.
Working Demo :
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>for v-for v-for="(priorityType, idx) in priorityTypes" this might solves your problem.