Can you please provide guidance on how to dynamically add number values from an array to a select tag in Vue.js?

Question

Can you please provide guidance on how to dynamically add number values from an array to a select tag in Vue.js?

I'm trying to populate a select tag with options from an array variable that contains arrays of number values. However, the values being output appear to be blank.

Here is the HTML code:

  <select required id="dropDown">
    <option>Select here</option>
    <option v-for="choice in choices">{{ choice }}</option>
  </select>

And here is the Javascript code:

var vm = new Vue({   
el: 'body',    
data:{
    'choices': [1,2,3,4,5]
    }
});

Could anyone kindly point out where I may have gone wrong? I am new to this and would appreciate any guidance or advice you can provide.

javascript arrays vue.js

Answer 1

Answer №1

To make Vue work correctly, ensure that the el option contains a valid DOM element for mounting. You have specified 'body' as the selector, so Vue will attempt to mount on the body element.

Your code is accurate otherwise. Just enclose your HTML within body tags and everything should function properly!

var vm = new Vue({   
  el: 'body',    
  data:{
    'choices': [1,2,3,4,5]
  }
});

<!-- Load Vue JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

<!-- Ensure the presence of body tags so that `el: 'body'` points to a valid HTML element -->
<body>
  <select required id="dropDown">
    <option>Select here</option>
    <option v-for="choice in choices">{{ choice }}</option>
  </select>
</body>

Answer 2

To make Vue work correctly, ensure that the el option contains a valid DOM element for mounting. You have specified 'body' as the selector, so Vue will attempt to mount on the body element.

Your code is accurate otherwise. Just enclose your HTML within body tags and everything should function properly!

var vm = new Vue({   
  el: 'body',    
  data:{
    'choices': [1,2,3,4,5]
  }
});

<!-- Load Vue JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

<!-- Ensure the presence of body tags so that `el: 'body'` points to a valid HTML element -->
<body>
  <select required id="dropDown">
    <option>Select here</option>
    <option v-for="choice in choices">{{ choice }}</option>
  </select>
</body>

Answer 3

Answer №2

When retrieving data from the backend, it's important to approach it differently. Let's say you have a list of categories that is being fetched from the backend.

 <el-select
              v-model="categorySelect.selected"
              size="large"
              name="category_id"
              single
              v-bind:placeholder="$t('products.category')"
          >
            <el-option
                v-for="item in categorySelect.autocompleteItems"
                :key="item.id"
                :label="item.name_en"
                :value="item.id"
            ></el-option>
          </el-select>

Your code structure should resemble this :

categorySelect: {
    selected: [],
    autocompleteItems: this.categoriesItem,
  },

categoriesItem: {
      required: false,
      type: Object
    },

Afterwards, fetch your data within your view like so :

:categories-item="{{$categories}}"

In the provided example above, you can populate your select list with distinct data originating from the backend.

Happy Coding!

Answer 4

When retrieving data from the backend, it's important to approach it differently. Let's say you have a list of categories that is being fetched from the backend.

 <el-select
              v-model="categorySelect.selected"
              size="large"
              name="category_id"
              single
              v-bind:placeholder="$t('products.category')"
          >
            <el-option
                v-for="item in categorySelect.autocompleteItems"
                :key="item.id"
                :label="item.name_en"
                :value="item.id"
            ></el-option>
          </el-select>

Your code structure should resemble this :

categorySelect: {
    selected: [],
    autocompleteItems: this.categoriesItem,
  },

categoriesItem: {
      required: false,
      type: Object
    },

Afterwards, fetch your data within your view like so :

:categories-item="{{$categories}}"

In the provided example above, you can populate your select list with distinct data originating from the backend.

Happy Coding!

Can you please provide guidance on how to dynamically add number values from an array to a select tag in Vue.js?

Answer №1

Answer №2

Similar questions

Exploring nested maps in JavaScript

Dynamic and operational icons accompany the AngularJS search input field

Performing a NodeJS MySQL query using chain promises

Locating consecutive combinations of characters in a two-dimensional array using Java

What is the best way to manage several asynchronous requests concurrently?

Incorporating a loading animation with an AJAX call

Tic-Tac-Toe: The square's value stays unchangeable

Click on a row in ReactTable to toggle the background color or expand the row

Trouble with formatting a HTML form

Setting up Stylelint in a Next.js project: A step-by-step guide

Unexpected Issues with the Ant Design Sidebar Layout Demo

The flow of events is not hindered by an if statement, even when the code within it is executed

What is the best way to tally data-ids within an anchor tag using jQuery or plain JavaScript?

What is the best approach for overlaying random meshes onto a terrain using a heightmap in three.js?

Rotating Images in 3D with CSS

Tips for successfully passing array index as an image source in Vuejs with v-img?

What is an alternative way to retrieve the page title when the document.title is unavailable?

Is it possible to redirect any web traffic using an authentication script?

The Cloudinary setup does not retrieve information from the .env file

Learn how to create an endless scrolling effect on a static webpage using only pure JavaScript