Здравствуйте, подскажите пожалуйста
Есть такой кастомный 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>
<script>
import axios from 'axios';
export default {
props: [
"options",
"defaultValue",
"showSearch",
"inputPlaceholder"
],
data() {
return {
toggle: false,
selectedItem: '',
value: "",
search: ""
};
},
watch: {
toggle: function (val) {
if(val) {
this.$emit('open');
} else {
this.search = '';
}
},
selectedItem: function(val) {
this.$emit('selectedItem', val)
}
},
methods: {}
}
</script>
Есть примерно такой JSON от сервера
formFields: [
{
name: 'brand',
type: 'select',
active: true,
fields: [
{
id: 0,
name: 'audi',
value: 'audi'
},
{
id: 1,
name: 'bmw',
value: 'bmw'
},
{
id: 2,
name: 'feat',
value: 'feat'
},
{
id: 3,
name: 'shkoda',
value: 'shkoda'
},
{
id: 4,
name: 'MB',
value: 'MB'
},
{
id: 5,
name: 'seat',
value: 'seat'
},
{
id: 6,
name: 'mazda',
value: 'mazda'
},
]
},
{
name: 'model',
type: 'select',
depend: ["brand"],
active: false,
fields: []
},
{
name: 'country',
type: 'select',
depend: ["brand"],
active: false,
fields: []
},
{
name: 'country',
type: 'input',
depend: ["brand"],
active: false,
fields: []
}
]
По этому JSON-у должна генерироваться форма.
Вот я генерирую форму
<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" @selectedItem="selected($event)" v-else-if="field.type == 'select'" :options="field.fields" default-value="Make a choice" show-search="true" input-placeholder="Выберите"></dropdown>
</div>
Вот вывожу в консоль данные
methods: {
selected(val) {
axios.get('../../../static/json/v1/models/' + val.id + '.json').then(response => {
console.log(response.data)
}).catch(e => {
console.log(e)
})
}
},
В консоль выводится объект, который мы выбрали, теперь у меня есть два вопроса:
1) каким образом сделать зависимость? То есть select model не должен быть активен пока select brand не выбран
2) как в select model передать данные, которые выводятся в консоль после выбора объекта?
При том, нужно учитывать , что п.1 и п.2 должны работать для всех объектов у которых есть свойство depend
