Как в vue.js работать с v-model в множестве select?

Добрый день!

Пример кода (немного упростил, чтобы было понятнее)
<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <transition name="fade">
                    <div v-if="data1.length">
                        <table class="table table-hover">
                            <tr v-for="(item, i) in data1">
                                <td>{{item}}</td>
                                <td>
                                    <select class="form-control" :disabled="data2.length == 0" v-model="selected">
                                        <option>Выберите значение</option>
                                        <option v-for="item in data2" :value="item">{{item}}</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data () {
            return {
                data1: [
					'Название организации',
					'Улица',
					'Дом',
					'Описание'
				],
                data2: [
					'Объект',
					'Номер дома',
					'Статус'
				],
                selected: [],
            }
        },
        methods: {
            
        }
    }
</script>


в data1 и data2 попадают данные из excel файла, столбцы могут называться по разному и могут быть перемешаны по разным колонкам

Пользователю нужно выбрать колонки для соответствия файлов друг с другом
например улица => Объект и т.д.

Столкнулся с проблемой, как получить выбранные значения
если для select добавить v-model="selected"
то во всех селектах будет выбираться одинаковое значение

отсюда вопрос:
Можно ли каким-либо образом динамически создавать свойства для v-model
например selected0, selected1 (подставляем в конце ключ значения из массива data1) чтобы понимать какие значения выбраны для каждого значения.

или может каким другим способом это можно сделать?
  • Вопрос задан
  • 6384 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Раз selected у вас массив - указывайте индекс, замените v-model="selected" на v-model="selected[i]".

Если вдруг напрягают null, которые vue подставляет для индексов без установленных значений, то массив можно заменить объектом.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы