M
M
Mikhail Smirnov2018-02-07 12:22:19
Vue.js
Mikhail Smirnov, 2018-02-07 12:22:19

How to work with v-model in select set in vue.js?

Good afternoon!
Code example (slightly simplified to make it clearer)

<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 and data2 get data from an excel file, columns can be named differently and can be mixed in different columns.
The user needs to select columns to match the files with each other
, for example, street => Object, etc.
I ran into a problem, how to get the selected values,
if you add v-model="selected" to select,
then the same value will be selected in all selects,
hence the question:
Is it possible to somehow dynamically create properties for v-model
, for example selected0, selected1 (substitute in at the end is the value key from the data1 array) to understand what values ​​are selected for each value.
Or maybe some other way to do it?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-02-07
@fortoster83

Since you have selected an array - specify the index , replace v-model="selected"with v-model="selected[i]".
If suddenly strain null, which vue substitutes for indexes without set values, then the array can be replaced with an object .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question