0

Мне нужно передать в бэк значение, введённое в селекторе.

Казалось бы, это решается любым из компонентов, типа vue-simple-suggest или даже простого v-select, но я столкнулся с тем, что ни в одном из протестированных компонентов нельзя присвоить модели то значение, которое вводишь. Только один из предустановленных вариантов. Но у меня изначально таких вариантов нет. Возможно ли как-то в одном компоненте присваивать v-model значение не из списка?

1

1 ответ 1

0

В итоге получилось следующее:

<template>
<vue-autosuggest
    v-model="deliveryAddress"
    :suggestions="filteredOptions"
    :input-props="inputProps"
    :limit="10"
    @selected="onSelected"
>
    <template slot-scope="{suggestion}">
        <div class="suggest-results">
            <div class="detail">
                {{ suggestion.item.name }}
            </div>
        </div>
    </template>
</vue-autosuggest>
</template>

import {VueAutosuggest} from 'vue-autosuggest' 
export default {
    name: "ххх",
    components: {
        ...
        VueAutosuggest
    },
    data() {
        deliveryAddresses: [],  //список предложенных вариантов
        selectedDeliveryAddress: '', //вариант, выбраный оператором
        filteredOptions: [],    //список предложенных вариантов в обёртке
        inputProps: {           //свойства селектра выбора
            id: 'autosuggest__input',
            class: 'form-control',
            placeholder: "Новый адрес",
        },
        limit: 10,              //Кол-во вариантов
     }

<style>
.detail {
    padding-bottom: 3px;
}

.detail:active,
.detail:hover,
.detail:focus {
    background-color: #F7F7F7;
    color: #0A0A0A;
}

.autosuggest__results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.autosuggest__results {
    border: 1px solid #E8E8E9;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px -2px rgba(34, 60, 80, 0.2);
}

.autosuggest__results-item {
    cursor: pointer;
}
</style>

Ваш ответ

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

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