@Sashjkeee
f-e

Как правильно загружать данные в select?

Сделал некий dropdown component
<template>
    <div>
        <div class="vue-dropdown" :class="{'vue-active':toggle}">
            <span @click="toggle = !toggle">{{ value.length ? value : defaultValue }}</span>
            <div class="vue-dropdown-collapsed" v-if="this.toggle">
                <input type="text" v-model="search" v-if="showSearch === 'true'" :placeholder="inputPlaceholder" @click="toggle == true">
                <ul>
                    <li v-for="(option, index) in options" :key="index" @click="toggle = false, value = option.name, selectedItem(option)" v-if="option.name.toLowerCase().indexOf(search.toLowerCase()) !== -1">{{ option.name }}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        props: [
            "options",
            "defaultValue",
            "showSearch",
            "inputPlaceholder"
        ],
        data() {
            return {
                toggle: false,
                value: "",
                search: ""
            };
        },
        watch: {
            toggle: function (val) {
                if(val === false) {
                    this.search = '';
                }
            }
        },
        methods: {
            selectedItem(value) {
                console.log(value)
            }
        }
    }
</script>


Сейчас в methods выводить объект, что мы выбрали.

<template>
    <div>
        <div v-for="(field, index) in formFields" :key="index"> 
            <ui_input v-if="field.type == 'input'" v-model="input" @change="change($event)"></ui_input>
            <dropdown :id="field.id" v-else-if="field.type == 'select'" :options="getAuto" default-value="Make a choice" show-search="true" input-placeholder="Выберите"></dropdown>
        </div>
    </div>
</template>

В общем суть вопроса.

Приходит JSON
formFields: [
    {
        name: 'my_field',
        class: 'moi_class',
        type: 'input',
        component: 'ui_input',
        id: 'moi_id1'
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 'moi_id2'
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 'moi_id4'
    }
]


Я вывожу на страницу элементы из этого JSON, но в каждый select должны загружаться свои данные, вот как это реализовать? Причем, что некоторые селекты завязаны друг на друге. Типо выбираешь марку автомобиля в одном селекте, в другом ты выбираешь уже модели для этого авто. А некоторые селекты никак не связаны между собой.

Вот не могу придумать как это реализовать
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
lavezzi1
@lavezzi1
В компоненте:

watch: {
  toggle: function (val) {
    if(val) {
       this.$emit('open');
    } else {
       this.search = '';
    }
  }
},


Где используете:
<dropdown @open="fetchData1"></dropdown>
<dropdown @open="fetchData2"></dropdown>
<dropdown @open="fetchData3"></dropdown>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы