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

Question

[Aleksandr]

Сделал некий 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 должны загружаться свои данные, вот как это реализовать? Причем, что некоторые селекты завязаны друг на друге. Типо выбираешь марку автомобиля в одном селекте, в другом ты выбираешь уже модели для этого авто. А некоторые селекты никак не связаны между собой.

Вот не могу придумать как это реализовать

Comments

[alvvi]

Так в первую очередь не понятно, куда, как и в каком виде приходят сами варианты для селектов?

[Aleksandr]

Илья Ростопка, сами варианты для селектов приходят json-ом.
должны приходить при открытие селекта

Answer 1

[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>

Comments

[Aleksandr]

так не получится, тк я вывожу лишь

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

То есть этих элементов может быть 100+

[lavezzi1]

<div for="(field, index) in formFields">
    <dropdown @open="fetchDropdownData(field.id)" :options="dropdownsData[field.id]"></dropdown>
</div>

methods: {
    async fetchDropdownData(id) {
        const currentDropdownData = await fetch('/api/dropdown/${id}');
        this.dropdownsData.push(currentDropdownData);
    }
}

[Aleksandr]

lavezzi1, Спасибо. только я вот чего не понял

в this.dropdownsData падают массивы объектов;

в :options="dropdownsData[field.id]" мы выбираем по id
Но ведь индекс в массиве не всегда будет равен этому id
как быть в данной ситуации?

[lavezzi1]

Aleksandr, Можно попробовать так:

methods: {
    async fetchDropdownData(id) {
        this.dropdownsData[id] = await fetch('/api/dropdown/${id}');
    }
}

Правда this.dropdownsData будет не реактивным.