Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

abdallahsawaqi's avatar

multiple select box using v-for

I have multiple select boxes which are rendered using a v-for loop, what I am trying to do is to store each option value for each select box in an array but when I select an option it only stores the chosen option, not multiple options

 <template v-for="(gettailor) in gettailors" :key="gettailor.id">

                          <div class="col-sm-6" >
                               <div class="form-floating" >
                                     <p>{{ gettailor.names }}</p>
                                </div>




                          </div>



                          <div class="col-sm-6">
                            <div class="form-floating">
                                <select   class="form-select shadow-none" id="tailors"  v-model="tailors"   required>

                                    <template v-for="(item) in gettailor.tailor" :key="item.id">

                                    <option :value="item.id">{{ item.tailor }}</option>

                                    </template>
                                </select>

                                <label for="tailors">Choose {{ gettailor.names }}</label>
                            </div>

                          </div>




                        </template>

  <script>
import { ref, watch,onMounted } from 'vue';
const tailors = ref([]);

</script>



0 likes
1 reply
abdallahsawaqi's avatar
abdallahsawaqi
OP
Best Answer
Level 7

i was able to solve it

<template v-for="(gettailor) in gettailors" :key="gettailor.id">

                          <div class="col-sm-6" >
                               <div class="form-floating" >
                                     <p>{{ gettailor.names }}</p>
                                </div>




                          </div>



                          <div class="col-sm-6">
                            <div class="form-floating">
                                <select   class="form-select shadow-none" id="tailors[]"  v-model="tailors[gettailor.id]"   required>

                                    <template v-for="(item) in gettailor.tailor" :key="item.id">

                                    <option :value="item.id">{{ item.tailor }}</option>

                                    </template>
                                </select>

                                <label for="tailors">Choose {{ gettailor.names }}</label>
                            </div>

                          </div>




                        </template>


<script setup>
const tailors = ref({});

</script>


Please or to participate in this conversation.