CODEWITHSUNDEEP
vue.js
Don Smythe
Don Smythe

Reputation: 9814

Vuejs populate a select element with an integer array

I am tring to populate a html select field with numbers 1 to 100 using Vuejs. I have tried:

<div id="selector">
    <select id='row_selector' class="form-control" v-model="intArray"></select>
</div>

<script type="text/javascript" src="path_to/vue.js"></script>
<script>
const MAX_VAL = 100; 
var numArray = Array.apply(null, {length: numArray}).map(Number.call, Number)
var app = new Vue({
    el: '#selector',
    data: {
        "intArray": numArray
    }
})

But the select element is empty. Do I need to use a directive to populate it?

Upvotes: 2

Views: 6898

Answers (1)

Srinivas Damam
Srinivas Damam

Reputation: 3045

View

<div id="app">
  <select v-model="selected">
    <option v-for="n in 100" :value="n">{{ n }}</option>
  </select>
  <p>
   Selected: {{ selected }}
  </p>
</div>

Component

new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})

Upvotes: 8

Related Questions