[Vuejs]-Vue js showing options in select using v-for

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>

👤Debug Diva