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
    Commented 17 апр. 2023 в 10:33
  • @voidsMark, я имею ввиду что внутри компонента md-select правильно прописаны emits, props и т.д, что бы v-model на пользовательском компоненте правильно работала. Если это, какой то компонент из сторонней библиотеки компонентов, то скорее всего всё будет Ок. Если вы сами сделали этот компонент и он бы не работал, так как я описывал в своём ответе, то скорее проблема в компоненте. vuejs.org/guide/components/v-model.html
    – Maxim
    Commented 17 апр. 2023 в 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
    Commented 17 апр. 2023 в 12:36
  • 1
    @voidsMark, нашёл эту библиотеку которую вы используете, на сайте документации этот в md-option везде есть value. В ответе сейчас исправлю как оно должно быть
    – Maxim
    Commented 17 апр. 2023 в 12:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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