How to dynamically generate <select> <option> elements in VueJS using the v-for directive

Question

How to dynamically generate <select> <option> elements in VueJS using the v-for directive

Just started exploring VueJS and I recently learned how to use a v-for loop to populate a Select Options box.

<select>
    <option v-for="person in persons" :value="personid">{{ personname }}</option>
</select>

Below is the list I am working with.

"persons": {
        "2": "Person1",
        "3": "Person2",
        "4": "Person3"
    }

This is the desired outcome for the Select Options box.

<select id="persons">
    <option value="3">Person1</option>
    <option value="4">Person2</option>
</select>

javascript arrays vue.js vuejs2 frontend

Answer 1

Answer №1

Fortunately, Vue has the capability to iterate through the properties of an Object as detailed in v-for with an Object.

Below is a code snippet that can assist you in achieving your desired outcome.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: () => {
    return {
      persons: {
        "2": "Person1",
        "3": "Person2",
        "4": "Person3"
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="persons">
    <option v-for="(name, id) in persons" :value="id">{{name}}</option>
  </select>
</div>

Answer 2

Fortunately, Vue has the capability to iterate through the properties of an Object as detailed in v-for with an Object.

Below is a code snippet that can assist you in achieving your desired outcome.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: () => {
    return {
      persons: {
        "2": "Person1",
        "3": "Person2",
        "4": "Person3"
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="persons">
    <option v-for="(name, id) in persons" :value="id">{{name}}</option>
  </select>
</div>

Answer 3

Answer №2

You're almost there, just make a few tweaks to that selection:

<select id="people" >
  <option
    v-for="(item, index) in peopleArray"
    :value="index"
    :key="index"
  >{{ item }}</option>
</select>

Answer 4

You're almost there, just make a few tweaks to that selection:

<select id="people" >
  <option
    v-for="(item, index) in peopleArray"
    :value="index"
    :key="index"
  >{{ item }}</option>
</select>

How to dynamically generate <select> <option> elements in VueJS using the v-for directive

Answer №1

Answer №2

Similar questions

Navigating Rails Active Storage in a VueJS Blog

The logo image dynamically switches as the user scrolls through various colored sections

Having difficulty communicating with the smart contract using JavaScript in order to retrieve the user's address and the balance of the smart contract

Is it feasible to relocate an embedded swf file from one tag to another?

Creating a list of ranges in an array with the ADDRESS formula using Excel VBA

Deploying Laravel and Vue.js on a shared hosting environment

Adding text to an existing div element using jQuery and ensuring the div tag automatically adjusts its height according to the text length

Guide on setting a property for req.session

What steps should be taken to safely sanitize untrusted JSON data before parsing it with JSON.parse method

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

Conceal the <p> element when the user interacts with the internal href

What is the best way to determine which option is most suitable: types, classes, or function types in TypeScript for

Retrieving table information using javascript

How to drop several pins on Google Maps with JavaScript

Show the JSON data from the server in a table format

Prevent automatic scrolling to the top of the page after submitting a form. Remain at the current position on the

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

Leveraging Google maps to find nearby stores

What is the best way to conceal a portion of the input value within a v-text-field?