(Vue.js) How can I populate the select tag with option tag from array of number values in data?

javascript arrays vue.js

11,960

The el option should provide Vue with an existing DOM element to mount on. You have provided a CSS selector for body, so Vue will try to mount on the body element.

Otherwise your code is correct. Just wrap your HTML in body tags and it works!

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>

<!-- add body tags so `el: 'body'` resolves to an HTML element -->
<body>
  <select required id="dropDown">
    <option>Select here</option>
    <option v-for="choice in choices">{{ choice }}</option>
  </select>
</body>

11,960

Author by

oli

Updated on June 08, 2022

Comments

oli almost 2 years
I would like to populate my select tag with options from an array variable which contains arrays of number values. But the values that are reproduced seems to be blank

HTML:
```
  <select required id="dropDown">
    <option>Select here</option>
    <option v-for="choice in choices">{{ choice }}</option>
  </select>
```
Javascript:
```
var vm = new Vue({   
el: 'body',    
data:{
    'choices': [1,2,3,4,5]
    }
});
```
Can someone point me of my mistake? Because I am just a beginner though, and I would like to learn from you guys.