Доброго времени суток!
Ребят, час провозился, не знаю почему такое поведение:
Небольшая программа на вью - старая, тогда основы изучал и так и осталась реализация без vue-cli.
Есть файлик js и html. В html содержится контейнер приложения и шаблон
модульного окна.
В js содержится все: есть корневой компонент, в него входят другие, но интересует именно модульное окно - это один уровень вложенности.
Итак: корневой компонент на created получает с сервера настройки для отображения формы (ajax(axios)), которая располагается в модульном окне. Он получает список процедур для вывода v-for и получает настройки для отображения полей ввода. В виде:
formSettings:{
name: {used:true, required:true},
phone: {used:false, required:false},
.....
}
В компонент модульного окна настройки и список "пробрасываются" в props - procedureList и siteSettings, т.е.:
Vue.component('#myModalForm' ,{
props: ['procedureList', 'siteSettings'],
data: function(){return}
}
Далее в #myModalForm есть разметка, примерно так:
<div v-for="procedure in procedureList">
<div>{{ procedure.name }}</div>
</div>
И в ней проблем нет - все корректно отображается. А проблемы есть, ниже:
<div v-if="siteSettings.name.used"></div>
Тут полное игнорирование, всегда "правда".
Т.е. компонент "не видит" пробрасываемые данные. Если на форму поставить кнопку и по щелчку изменить свойство, то v-if срабатывает. Выводил в консоль - siteSettings.name.used == false, как только прилетают created по созданию корневого компонента. Единственная странность, chrome после прилета данных выводит в консоль false черным цветом, а после изменения с помощью событий(по щелчку) - синим.
В чем может быть проблема?
Я еще добавлю, что в корневом элементе создавал в data аналог присылаемого с сервера объекта и настройки этого объекта применяются к модальному окну, но применяются такими какими заложены в коде, после того как прилетают новые данные с сервера - ничего не менятеся в работе v-if модалки. А в консоли все нормально.
Уф, длинно получилось :-(
Благодарю за потраченное время.
Средний
