0

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

<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()

0

1 ответ 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.

4
  • А что значит "Правильно прокинута?" В селектед уходит false, хотя в селекте стринги
    – voids Mark
    17 апр в 10:33
  • @voidsMark, я имею ввиду что внутри компонента md-select правильно прописаны emits, props и т.д, что бы v-model на пользовательском компоненте правильно работала. Если это, какой то компонент из сторонней библиотеки компонентов, то скорее всего всё будет Ок. Если вы сами сделали этот компонент и он бы не работал, так как я описывал в своём ответе, то скорее проблема в компоненте. vuejs.org/guide/components/v-model.html
    – Maxim
    17 апр в 12:31
  • 1
    @voidsMark , возможно в selected уходи false, потому что на md-option, нужно добавить value и в него записывать вашу итерацию format. Должно быть что то вроде этого <md-option v-for="format in templates" :value="format" :key="format">{{ format }}</md-option>
    – Maxim
    17 апр в 12:36
  • 1
    @voidsMark, нашёл эту библиотеку которую вы используете, на сайте документации этот в md-option везде есть value. В ответе сейчас исправлю как оно должно быть
    – Maxim
    17 апр в 12:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.