Faced a problem. Dynamically form the form from select on Vue.js from the list:
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: 'модель картриджа'} ] those. the first select are objects with pid = 0, the second with pid = 1 or 2, etc. When the page is loaded, the first select is formed - this is where pid = 0. When you select the first select, let's say "software installation", everything works correctly and the second select is added to the page with pid = 1: 
But when changing the value in the first select to "office equipment maintenance", the second select does not change, everything that is connected with the "software installation" still hangs in it: 
Although when printing the array myElements in the console after push (), you can see that it is filled as it should be. Adding to the array myElements through this. $ Set does not help.
If during the formation of the array myElements add setTimeout (commented out in the code), then everything works correctly. The documentation says that push and splice are reactive. What is the reason for this behavior?
<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! I figured out if I removed the data () method in the SelectComponent component and directly into the cycle with pass options, then everything changes as expected, strange behavior, in my opinion, and if I want to validate, for example, the input data ?:
<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> 
