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

Question

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.

asemahle · Accepted Answer · 2016-07-15 17:28:25Z

9

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>

answered Jul 15, 2016 at 17:28

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

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

Comments

Enver · Accepted Answer · 2021-06-06 11:48:43Z

If you get your data from the backend, you need to follow another way. For example, I have a category list, which comes 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 script should looks like this :

categorySelect: {
    selected: [],
    autocompleteItems: this.categoriesItem,
  },

categoriesItem: {
      required: false,
      type: Object
    },

and then, you need to get your data on your view like this :

:categories-item="{{$categories}}"

as you see the above code, you can fill your select list with a different list that comes from the backend.

Enjoy Your Code!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related