2

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?

Don Smythe
  • 9,234
  • 14
  • 62
  • 105

1 Answers1

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: ''
  }
})
Srinivas Damam
  • 2,893
  • 2
  • 17
  • 26
  • 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 Feb 18 '17 at 12:27
  • 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 Feb 18 '17 at 13:10
  • For Jinja2 you just have to add {% raw %} {% endraw %} around your Vuejs braces as per here https://stackoverflow.com/questions/25359898/escape-jinja2-syntax-in-a-jinja2-template – Don Smythe Feb 18 '17 at 13:14