Как передать данные из селекта VueJS

Question

Как передать данные из селекта VueJS

Рейтинг: 0Ответов: 1Опубликовано: 16.04.2023

Подскажите, пожалуйста, есть форма:

<div class="md-layout">
    <div class="md-layout-item md-size-100 md-small-100">
        <md-field>
            <label>Формат печати</label>
            <md-select v-model="templates">
                <md-option v-for="format in templates" :key="format">{{ format }}</md-option>
            </md-select>
        </md-field>
    </div>
</div>
<md-button class="md-raised" @click="testPrint()">Тестовая печать</md-button>

Как забрать с селекта выбранное значение?

Из темплейтов приходит массив со стрингами. они идут в селект. Выбранную стрингу нужно передать в testPrint()

javascript vue.js

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Что бы получить выбранное значение из select нужно, в v-model указать переменную в data с которой это значение будет связано. Например selected.

<div class="md-layout">
    <div class="md-layout-item md-size-100 md-small-100">
        <md-field>
            <label>Формат печати</label>
            <md-select v-model="selected">
                <md-option v-for="format in templates"  :value="format" :key="format">{{ format }}</md-option>
            </md-select>
        </md-field>
    </div>
</div>
<md-button class="md-raised" @click="testPrint()">Тестовая печать</md-button>

Затем это значение можно будет получить в любом методе, хуке, вычисляемом свойстве и т.д. через this.

<script>
export default{
    data(){
        return {
           selected: null
        }
    },
    methods:{
       testPrint(){
          alert(this.selected);
       }
    }
</script>

Если его нужно вывести в template, то this не нужно использовать.

<template>
   <!-- вывод selected в шаблоне -->
   {{selected}}
   <div class="md-layout">
    <div class="md-layout-item md-size-100 md-small-100">
        <md-field>
            <label>Формат печати</label>
            <md-select v-model="selected">
                <md-option v-for="format in templates"  :value="format" :key="format">{{ format }}</md-option>
            </md-select>
        </md-field>
    </div>
</div>
</template>

Это всё должно сработать при условии, что внутри компонента md-select правильно прокинута v-model.

Как передать данные из селекта VueJS

Ответы