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

Establishing the primary meta properties on Vue Router

Automatically resize ui-select dropdown box to the left side

The GM_xmlHttpRequest POST method is not functioning properly when called within an event listener

What is the scope parameter for the facebook-node-sdk in node.js?

The display message in Javascript after replacing a specific string with a variable

What could be causing the service worker in my Parcel.js-built PWA to function correctly when online but malfunction when offline?

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

The magic of $.ajax lies in its ability to load an unexpected URL, diverging from my original

Creating dynamic dropdown menus using JSON files in jQuery mobile is a useful technique for enhancing user experience on

What is the best way to implement the useCallback hook in Svelte?

Exploring the realms of Django Administrator with external JavaScript integration

How can I retrieve the line number of a code during runtime in JavaScript?

Does AngularJS have a similar function to $(document).ajaxSuccess()?

Where should data processing be conducted: in the service or controller layer?

Render a component in certain routes based on specific conditions in React

Having trouble with radio button validation in JS?

EdgeDriver with Selenium and Java can be interrupted by a modal window dialog box, causing the test script to pause its execution

Using PHP script, extract information from a JSON file and populate a dropdown menu in HTML

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

Guide on utilizing angularjs $q.all() method with a dynamically generated set of promises