Зависимость нескольких select-ов?

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>

<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

Answer 1

[0xD34F]

каким образом сделать зависимость? То есть select model не должен быть активен пока select brand не выбран

Например, так. Добавляете в объекты, на основе которых создаются элементы управления, свойство value, передаёте его в v-model соответствующего элемента (надо будет реализовать v-model для вашего dropdown'а). Делаете computed свойство formData на основе этих value. И задаёте элементам v-if - если элемент имеет зависимость, то пока соответствующее поле в formData не заполнено, элемент не создаётся (или disabled реализовываете - с аналогичной логикой).

как в select model передать данные, которые выводятся в консоль после выбора объекта?

Ну, НАВЕРНОЕ, вместо вывода в консоль эти данные куда-то сохранить надо - и передавать оттуда в соответствующий dropdown.

Comments

[Aleksandr]

У вас случайно нет примера чего-то подобного или близкого?

[0xD34F]

Aleksandr, ну, на основе тех обрывков, что вы показали, сделал небольшой примерчик (разумеется, без запросов - зависимые данные достаются из заранее приготовленных объектов, находящихся вне экземпляра vue).

[Aleksandr]

0xD34F, Отличный пример, только вот вопрос возник. Я взял ваш пример и немного дополнил его

'formData.brand'(val) {
    axios.get('../../../static/json/v1/models/' + val + '.json').then(response => {
        this.dependentData.brand = {
            model: response.data.models,
            country: response.data.city
        }
    }).catch(errors => {
        console.error(errors);
    });
}

И столкнулся с проблемой.
В самый первый раз когда я выбираю brand вылетает ошибка Cannot read property 'model' of undefined"
Начиная со второго раза данные прогружаются, но будто с опазданием в один клик.
То есть я выбираю первый раз bmw (запрос ушел. ответ пришел, но вылетает ошибка)
Во второй раз я выбираю audi и во второй селект загружаются модели bmw

Я не могу понять почему такое поведение?

[0xD34F]

Aleksandr, а, это понятно - значение выбрано, зависимые списки рендерятся - а данных для них ещё нет, запрос-то асинхронный. Немного переписал демку - добавлен таймаут при назначении dependentData для имитации запроса.

[Aleksandr]

0xD34F, Гениально, спасибо

[Aleksandr]

0xD34F, я могу вам еще один вопрос задать?

[0xD34F]

Aleksandr, ну, попробуйте. Только убедитесь, что выбрали для этого правильное место. Если ваш новый вопрос не будет иметь отношения к вопросу исходному, а задан он будет здесь - ответа не дождётесь.

[Aleksandr]

0xD34F, все по тому же примеру вопрос;

Смотрите, я вывел все в отдельный json (поля для формы) , через axios дергаю эти данные, записываю все в state. Потом геттером дергаю для формы поля.

Но вот столкнулся с проблемой, что все данные отрабатывают отлично, кроме полей для селектов
то есть я открываю первое поле с брендом и там все отображается, но как только я выбираю - ничего не происходит - он не выбирается

[0xD34F]

Aleksandr, ну, на это мне ответить нечего. Сделаете пример в песочнице - появится предмет для разговора.

[Aleksandr]

0xD34F, вот: накидал примерчки
jsfiddle.net/affdfjh4/54

[0xD34F]

Aleksandr,
Во-первых, formData вы собираете из allFields, который у вас пустой - надо использовать getFields.

Во-вторых - почему вы создаёте свойства value для ваших полей в геттере? Получается, что value, что бы вы ни выбрали, будут постоянно перетираться пустыми значениями. Делайте это один раз - при получении описания полей (или как это называется?), в экшене getData.

Исправленный вариант (<имя бренда>.json у вас не грузятся, так что вернул заглушку из предыдущих демок).

[Aleksandr]

0xD34F, Тогда самый последний вопрос задам

Смотрите json приходит

{
    "formFields": [],
    "otherFields": [],
    "tableFields": []
}

Вот сам запрос

export const getFields = () => {
  return axios.get(config.endPoint + '/kasko/fields.json')
    .then(({
      data
    }) => {
      if (data.errors) throw new Error(data.errors);
      return data;
    })
};

Вот action

getFields({ commit }) {
    getFields().then(response => {
      let formFields = response.formFields.map(n => ({ ...n, value: '' }))
      let otherFields = response.otherFields.map(n => ({ ...n, value: '' }))
      let tableFields = response.tableFields.map(n => ({ ...n, value: '' }))
      commit(SET_FIELDS_TRANSPORT, formFields);
      commit(SET_FIELDS_OTHER, otherFields);
      commit(SET_FIELDS_TABLE, tableFields);
    }).catch(errors => {
      console.error(errors);
    });
  },

Вот mutations

[SET_FIELDS_TRANSPORT](state, payload) {
    state.FIELDS.formFields = payload;
  },
  [SET_FIELDS_OTHER](state, payload) {
    state.FIELDS.otherFields = payload;
  },
  [SET_FIELDS_TABLE](state, payload) {
    state.FIELDS.tableFields = payload;
  },

Вот ошибка

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

Голова уже кругом. Не понимаю, что не так я делаю

[0xD34F]

Aleksandr, написано же, что не так - изменяете значения из vuex вне мутаций. В какой момент возникает ошибка?

[Aleksandr]

0xD34F при выборе селекта

[0xD34F]

Aleksandr, а, ну да, v-model же, по свойствам объекта из vuex. Наверное, от v-model придётся отказаться - вручную передаём в компонент value и обрабатываем событие input, по input'у дёргаем мутацию, которая проапдейтит соответствующее свойство. Как-то так (добавлены мутация updateValue и метод onInput).