Загрузка данных в select vue js?

Question

[Aleksandr]

Есть такой компонент select

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

И есть такой компонент для формы

<template>
    <div>
        <div v-for="(field, index) in formFields" :key="index"> 
            <dropdown :id="field.id" @open="fetchDropdownData(field.id)" v-else-if="field.type == 'select'" :options="dropdownsData[field.id]" default-value="Make a choice" show-search="false" input-placeholder="Выберите"></dropdown>
        </div>
    </div>
</template>

Форма генерируется из JSON'а

formFields: [
    {
        name: 'my_field',
        class: 'moi_class',
        type: 'input',
        component: 'ui_input',
        id: 1
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 2
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 3
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 4
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 5
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 6
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 7
    },
    {
        name: 'brand',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 8
    },
    {
        name: 'model',
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 9
    }
]

Так пытаюсь загружать данные в select

fetchDropdownData(id) {
    const currentDropdownData = axios.get('../../../static/json/v1/auto.json').then(response => {
        this.dropdownsData.push(response.data);
    }).catch(e => {
        console.log(e)
    })
    console.log(this.dropdownsData)
}

Теперь о проблемах:
1) в this.dropdownsData падают массивы объектов;
в :options="dropdownsData[field.id]" мы выбираем по id
Но ведь индекс в массиве не всегда будет равен этому id, как быть в данной ситуации?
2) например будет два селекта, 1 - марки автомобиля, 2 - модели.
сам json будет выглядеть примерно так

{
   "id": 17,
   "name": "BMW",
   "value": "BMW",
   "models": [
      "i3",
      "i8",
      "M3",
      "M4",
      "M5",
      "M6",
      "X1",
      "X3",
      "X4",
      "X5",
      "X6"
   ]
}

так вот второй селект не должен работать, пока не выбран 1 селект, и во 2 селект передавать массив = значению первого селекта;

Answer 1

[Даниил Сорокин]

ну смотрите.
1) ну по хорошему бы возвращать эту информацию вместе с информации о поле

formFields: [
    {
        name: 'my_field',
        data: [/** your data **/],
        class: 'moi_class',
        type: 'input',
        component: 'ui_input',
        id: 1
    },
    {
        name: 'brand',
        data: [/** your data **/],
        class: 'moi_class',
        type: 'select',
        component: 'dropdown',
        id: 2
    },
]

вам тогда не нужно делать лишние реквесты.
2) ну тут через цикл выводите все марки автомобиля. при выборе прокидываете в функцию параметром выбранную сущность, которая содержит в себе модели. это сущность должна реактивна показаться во втором select и раздизэблить его(дизэйблить его до тех пор пока в него не прокинута сущность)

Comments

[Aleksandr]

Даниил Сорокин formFields приходит от заказчика, в примерно, таком виде, что я скинул)
поэтому нужно под него подстаиваться

[Даниил Сорокин]

Aleksandr, ну тогда передавайте в реквесте айдишник вашего компонента, чтобы сервер вернул только его данные

[Даниил Сорокин]

Aleksandr, вы кстати почему-то как-раз таки в функции fetchDropdownData(id) передаете айдишник, но в теле его не используете

[Aleksandr]

Даниил Сорокин, типо вот так?

fetchDropdownData(id) {
    const currentDropdownData = axios.get('../../../static/json/v1/auto.json').then(response => {
        this.dropdownsData[id] = response.data;
    }).catch(e => {
        console.log(e)
    })
    console.log(this.dropdownsData)
}

[Даниил Сорокин]

Aleksandr, нет, передавать id в запросе.

fetchDropdownData(id) {
    const currentDropdownData = axios.get('../../../static/json/v1/auto.json', {params: {
   id: id
    }}).then(response => {
        this.dropdownsData = response.data;
    }).catch(e => {
        console.log(e)
    })
    console.log(this.dropdownsData)
}

надеюсь у вас сервер имеет функционал отдачи данных по айдишнику)

[Aleksandr]

Даниил Сорокин, и все равно не понимаю))