A small program for twisting is old, then the basics were studied and the implementation remained without vue-cli. There is a js and html file. The html contains the application container and the modular window template. Js contains everything: there is a root component, it includes others, but it is the modular window that is interested in - this is one level of nesting. So: the root component on created receives settings from the server to display the form (ajax (axios)), which is located in the modular window. It receives a list of procedures for outputting v-for and receives settings for displaying input fields. As:
formSettings:{ name: {used:true, required:true}, phone: {used:false, required:false}, ..... } In the component of the modular window, the settings and the list are "forwarded" to props - procedureList and siteSettings , i.e .:
Vue.component('#myModalForm' ,{ props: ['procedureList', 'siteSettings'], data: function(){return} } Next in #myModalForm there is a markup, like this:
<div v-for="procedure in procedureList"> <div>{{ procedure.name }}</div> </div> And there are no problems in it - everything is correctly displayed. And there are problems, below:
<div v-if="siteSettings.name.used"></div> There is complete disregard, always "true." Those. the component "does not see" the forwarding data. If you put a button on a form and click on a property to change, then v-if works. Output to the console - siteSettings.name.used == false , as soon as the created to create the root component. The only odd thing is that chrome, after the arrival of the data, displays false black in the console, and after the change with the help of events (on click) - in blue. What could be the problem? I will also add that in the root element I created in data an analogue of the object sent from the server and the settings of this object are applied to the modal window, but they are applied as they are in the code after new data arrives from the server - nothing changes in v-if modalki. And in the console, everything is fine.