0

Столкнулся с проблемой. Динамически формирую форму из select на Vue.js из списка:

var inpData = [
    { id: 1, pid: 0, tag: 'select', title: 'установка ПО'},
    { id: 2, pid: 0, tag: 'select', title: 'обслуживание оргтехники'},
    { id: 3, pid: 1, tag: 'select', title: 'стандартные ПО'},
    { id: 4, pid: 1, tag: 'select', title: 'программы ИВЦ'},
    { id: 5, pid: 2, tag: 'select', title: 'замена картриджа'},
    { id: 6, pid: 2, tag: 'select', title: 'установка принтера'},
    { id: 7, pid: 5, tag: 'input', title: 'модель картриджа'}
]

т.е. первый select это объекты с pid = 0, второй с pid = 1 или 2 и т.д. При загрузке страницы происходит формирование первого select - это где pid = 0. При выборе в первом select, допустим "установка ПО", все корректно отрабатывает и на страницу добавляется второй select с pid = 1: корректно
Но при изменении value в первом select на "обслуживание оргтехники" второй select не меняется, в нем по прежнему висит все, что связанно с "установкой ПО":не корректно

Хотя при распечатке массива myElements в консоли после push() видно, что он наполнен как должен быть. Добавление в массив myElements через this.$set не помогает.

Если при формировании массива myElements добавить setTimeout (в коде закомментил) то все корректно отрабатывает. В документации написано, что push и splice реактивны. В чем причина такого поведения?

<template>
<div>
    <form>
        <transition-group name="fade">
            <div v-for="(elem, index) in myElements" :key="index" class="form-group">
                <template v-if="elem.tag == 'select'">
                    <select-component v-on:change-select="changeSelect($event)"
                                      v-bind:options="elem.data"
                                      v-bind:index="index">
                    </select-component>
                </template>
                <template v-else-if="elem.tag == 'input'">
                    <input-component></input-component>
                </template>
            </div>
        </transition-group>
    </form>
</div>
</template>

<script>
import SelectComponent from './SelectComponent'
import InputComponent from './InputComponent'

var inpData = [
    { id: 1, pid: 0, tag: 'select', title: 'установка ПО'},
    { id: 2, pid: 0, tag: 'select', title: 'обслуживание оргтехники'},
    { id: 3, pid: 1, tag: 'select', title: 'стандартные ПО'},
    { id: 4, pid: 1, tag: 'select', title: 'программы ИВЦ'},
    { id: 5, pid: 2, tag: 'select', title: 'замена картриджа'},
    { id: 6, pid: 2, tag: 'select', title: 'установка принтера'},
    { id: 7, pid: 5, tag: 'input', title: 'модель картриджа'}
]

function myFilter(pid) {
    return inpData.filter( x => x.pid === pid )
}

export default {
    data: function() {
        return {
            myElements: [],
        }
    },
    components: { 'select-component': SelectComponent, 'input-component': InputComponent },
    methods: {
        changeSelect(data) {
            var val = Number(data.val),
                idx = Number(data.idx)

            this.myElements.splice(idx + 1)

            var tmp = myFilter(val),
                tag = '',
                pid = null

            if(tmp.length === 1) {
                tag = 'input'
                pid = tmp[0].pid
            }
            else if(tmp.length > 1) {
                tag = 'select'
                pid = tmp[0].pid
            }

            if(tag != '' && val !=0) {
                //при прогоне через setTimeout все работает
                //var $this = this
                //setTimeout(function() {
                    this.myElements.push({ tag: tag, data: tmp })
                //}, 3000)
            }
        }
    },
    created() {
        this.myElements.push({ tag: 'select', data: myFilter(0) })
    },
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ {
opacity: 0;
}
</style>

UPDATE! Разобрался, если удалить метод data() в компоненте SelectComponent и напрямую в цикл с передать options то все меняется как положено, странное поведение, на мой взгляд, а если я захочу валидировать, например, входные данные?:

<template>
<select v-on:change="$emit('change-select', $event.target.value)" class="form-control">
    <option value="0">выберите из списка</option>
    <option v-for="option in selectOptions" v-bind:value="option.id">{{ option.title }}</option>
    <option value="-1">другое</option>
</select>
</template>

<script>
export default {
    props: ['options'], /* это нужно передавать вместо selectOptions */
    data() {
        return {
            selectOptions: this.options,
        }
    }
}
</script>

2 ответа 2

1

Посмотрел код. Данные успешно передаются в компонент select-component, а вот дальше они никак не используются. Т.е. данные задаются только один раз, и при обновлении входных параметров ничего не происходит.

    data() {
        return {
            selectOptions: this.options,
            selectIndex: this.index
        }
    },

Для того, чтобы можно было использовать изменяющениеся данные нужно либо использовать их напрямую в коде, без обертывания в selectOptions, либо использованть отслеживание: watch или вычисляемые свойства.

<option v-for="option in options" v-bind:value="option.id">{{ option.title }}</option>

Удачи.

0

К сожалению, код который Вы привели выше сложно проверить "на живую", так что могу только предположить, что дело в том, что функция myFilter возвращает не реактивынй массив, из за чего тереяется реактивность массива myElements.

Чисто из практики, такие прооблемы проще всего решаются, если использовать не метод для составления нового массива, а вычисляемое свойство, которое возвращает массив и который используется дальше. При этом массив уже точно будет реактивным и по этому поводу беспокоиться больше не придется.

2
  • Удалил случайно предыдущий коммент. На живую можно тут попробовать 23 мая 2018 в 19:25
  • Я Шмог), ответ добавил на страницу. Понял теперь ваш комментарий. Спасибо! 25 мая 2018 в 19:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.