Столкнулся с проблемой. Динамически формирую форму из 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>