Vue - v-for on html 'select' tag is creating multiple drop down boxes instead of one

Question

My code is simple, I have an array with multiple entries inside of it. I would like to cycle through that array, and create a single drop down box with all the array values listed as 'select' options.

However, multiple drop down boxes are being created instead of just one, I don't know why. Each drop down box does have the correct {{ group }} name, so it is pulling the data properly from what I can see, it just needs to be in one select list.

HTML:

<select class="groupContainer"  v-for="(group, id) in groupList" :key="group.id">
  <option v-bind:value="groupList[id]" class="groupValue"> {{ group }} </option>
</select>

Vue:

export default {
  name: 'AddPaste',
  data(){
    return{
      title: null,
      content: null,
      feedback: null,
      slug: null,
      groupList: []
    }

  },

ittus · Accepted Answer · 2018-10-03 01:49:16Z

1

v-for should be in option tag, not select

<select class="groupContainer"  >
  <option v-for="(group, id) in groupList" :key="id"
    v-bind:value="group" class="groupValue"> 
    {{ group }} 
  </option>
</select>

answered Oct 3, 2018 at 1:49

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Vue - v-for on html 'select' tag is creating multiple drop down boxes instead of one

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related