CODEWITHSUNDEEP
javascripthtmlformsvue.jsfrontend
fiksx
fiksx

Reputation: 178

Vue js showing options in select using v-for

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

Upvotes: 0

Views: 2148

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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>

Upvotes: 2

Robin Giri
Robin Giri

Reputation: 31

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

Upvotes: 1

Related Questions