S
S
Sergey2018-02-20 15:19:14
Vue.js
Sergey, 2018-02-20 15:19:14

Props and v-if are not friendly, why such behavior?

Good day!
Guys, I was busy for an hour, I don't know why this behavior:
A small program in view is old, then I studied the basics and the implementation remained without vue-cli.
There is a js and html file. The html contains the application container and the module window template .
js contains everything: there is a root component, it includes others, but it is the module window that is of interest - this is one level of nesting.
So: the root component on created receives from the server the settings for displaying the form (ajax(axios)), which is located in the module window. It receives a list of procedures to output v-for and receives settings for displaying input fields. As:

formSettings:{
name: {used:true, required:true},
phone: {used:false, required:false},
.....
}

In the module window component, the settings and the list are "thrown" into props - procedureList and siteSettings, i.e.:
Vue.component('#myModalForm' ,{
props: ['procedureList', 'siteSettings'],
data: function(){return}
}

Next in #myModalForm is the markup, something like this:
<div v-for="procedure in procedureList">
<div>{{ procedure.name }}</div>
</div>

And there are no problems in it - everything is displayed correctly. And there are problems, below: There is a complete disregard, always "truth". Those. the component "does not see" the forwarded data. If you put a button on the form and change the property on click, then v-if works. Output to the console - siteSettings.name.used == false, as soon as created arrives to create the root component. The only oddity is that chrome displays false in black after the data arrives, and blue after the change using events (on click). What could be the problem?
<div v-if="siteSettings.name.used"></div>
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 are applied as they are in the code, after new data arrives from the server - nothing changes in the work of v-if modals. And in the console everything is fine.
Phew, it turned out long :-(
Thank you for your time.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-02-20
@Prow1er

The only oddity is that chrome displays false in black after the data arrives, and blue after the change using events (on click).
What could be the problem?

It's good that you paid attention to the color - in the first case you have "false" (string, so it's "always true"), in the second false (boolean).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question