Vuejs populate a select element with an integer array

Question

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?

Srinivas Damam · Accepted Answer · 2017-02-18 12:06:29Z

8

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: ''
  }
})

answered Feb 18, 2017 at 12:06

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Don Smythe Over a year ago

This partly works - I get a drop down that appears to be the correct size, but it is empty and nothing is printed next to 'Selected:' on selection?

Don Smythe Over a year ago

Yes you are right the snipper works, I think the issue may be because I am using jinja2 tempating and the double braces causing a problem. Is there a way to just supply an array to the select element?

Don Smythe Over a year ago

For Jinja2 you just have to add {% raw %} {% endraw %} around your Vuejs braces as per here stackoverflow.com/questions/25359898/…

Collectives™ on Stack Overflow

Vuejs populate a select element with an integer array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related