How do I get values from multiple vue select instances?

Question

I have 2 arrays of objects like below. I need to create a select for every questions element, and I need to have the options connected with the selections by the id. In this case I need to have 2 selects, the first one will have 1000 , 5000 and 10000 as options meanwhile the second select will have yes and no as options

const questions = [{
        'id': 1,
        'question': 'KM'
    },
    {
        'id': 2,
        'question': 'Works'
    }
]

const selections = [{
        'question_id': 1,
        'value': 1000
    },
    {
        'question_id': 1,
        'value': 5000
    },
    {
        'question_id': 1,
        'value': 10000
    },
    {
        'question_id': 2,
        'value': 'yes'
    },
    {
        'question_id': 2,
        'value': 'no'
    }
]

I made it like this in vue but the issue is that I can't save the data in the v-model as I'm returning the values from cars() and not a variable specified in data()

<div class="form-group" v-for="item in questions" v-bind:key="item.question">
    <h5 v-if="showQuestion(item.id)">{{ item.question }}</h5>

    <div class="tour-options-select" v-if="showQuestion(item.id)">
        <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown" v-model="questions.value">
            <option v-for="item1 in cars(item.id)" v-bind:key="item1.id" :value="item1.display_name">{{ item1.display_name }}</option>
        </select>
    </div>
</div>

Ultimately, I just need to know, how do I get the value when I have a structure like the one I defined above?

Answer 1

If you have an array in data() to store your selected options, you can use v-model to dynamically bind with an element in that array if you give it an index:

 new Vue({ el: '#app', data: { questions: [{ 'id': 1, 'question': 'KM' }, { 'id': 2, 'question': 'Works' } ], selections: [{ 'question_id': 1, 'value': 1000 }, { 'question_id': 1, 'value': 5000 }, { 'question_id': 1, 'value': 10000 }, { 'question_id': 2, 'value': 'yes' }, { 'question_id': 2, 'value': 'no' } ], selected: [], }, methods: { cars: function(id) { return this.selections.reduce((arr, currSel) => { if (currSel.question_id == id) arr.push(currSel); return arr; }, []); }, } });

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <div id="app"> <div v-for="(question, index) in questions" :name="question.question" :key="question.id"> <select v-model="selected[index]"> <option v-for="option in cars(question.id)" :key="option.question_id" :value="option.value"> {{ option.value }} </option> </select> </div> <p>Selected:</p> <pre>{{ $data.selected }}</pre> </div>

Another approach would be to use events to handle the changes, calling a custom function each time the user makes a selection, eg using @change :

 new Vue({ el: '#app', data: { questions: [{ 'id': 1, 'question': 'KM' }, { 'id': 2, 'question': 'Works' } ], selections: [{ 'question_id': 1, 'value': 1000 }, { 'question_id': 1, 'value': 5000 }, { 'question_id': 1, 'value': 10000 }, { 'question_id': 2, 'value': 'yes' }, { 'question_id': 2, 'value': 'no' } ], }, methods: { cars: function(id) { return this.selections.reduce((arr, currSel) => { if (currSel.question_id == id) arr.push(currSel); return arr; }, []); }, } });

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <div id="app"> <div v-for="(question, index) in questions" :name="question.question" :key="question.id"> <select @change="console.log('Option', $event.target.value, 'chosen for Q', question.id)"> <option selected disabled>Select...</option> <option v-for="option in cars(question.id)" :key="option.question_id" :value="option.value"> {{ option.value }} </option> </select> </div> </div>

This way will give you more freedom to store or process the data as you wish, but you'll have to do it manually.