Vue js 使用 v-for 在 select 中显示选项

Question

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')"

Answer 1

for v-for v-for="(priorityType, idx) in priorityTypes" this might solves your problem.

Answer 2

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>