Не могу понять куда сохраняются данные select multiply?

Question

Подскажите как получить данные в массиве из select multiply?

<form action="#" id="carsSelection" v-if="vehicleItem">
<div class="d-flex flex-column">
  <label class="col-form-label filter-label">Выберите автомобиль</label>
<select class="form-select" aria-label="multiple select example" size='10' form="carsSelection" multiple="multiple">
  <option selected>Автомобили не выбраны</option>
  <option :value="auto.name" v-for="auto of vehicleItem" :key="auto.id">
    {{ auto.name }}</option>
</select>
</div>
<button class="btn btn-success">Сохранить выбор</button>
</form>

Answer 1

Добавляем такой JS-код:

var myselect = document.querySelector('select');
document.querySelector('button').onclick = function(){
    var values = [];
     // перебираем массив опций
    for(var i = 0; i < myselect.options.length; i ++) if(myselect.options[i].selected) values.push(myselect.options[i].value); // если опция выбрана - добавим её в массив
    console.log(values);
}

Answer 2

Через v-model, как и в любых полях формы:

<template>
    <select v-model="selectedValues" multiple>
      <option selected>Автомобили не выбраны</option>
      <option :value="auto.name" v-for="auto in vehicleItem" :key="auto.id"> {{ auto.name 
    }}</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            selectedValues: []
        }
    }
}
</script>

В selectedValues (из примера, переменнюу можете назвать как угодно) будете получать массив с выбранными значениями из values

БЛОГ НА HUSL

Не могу понять куда сохраняются данные select multiply?

Ответы (2 шт):