V-if based on props

Hi there,

I am still stuck with beginner stuff, sorry.

Could you please view this Fiddle https://jsfiddle.net/2gdhvums/2/

The presumingly simple thing I am trying to do is:

The component has a form that should show if the parent property showSubForm is set to True AND the id value in the parents myForm object equals 4.

The trouble is that somehow these settings are not properly recognized. They show up in Vue Dev Tools in the component section. The strange thing is that the object myForm is undefined and showSubForm remains unchanged though there are $attrs that show the right values. Also, when I output showSubForm and myForm via console they look OK.

Could you please tell me what I am doing wrong?

You need watchers dude. Watch to props in child and problem will be fixed. Props are not reactive by default.

You don’t need watchers and props are reactive when handled properly.

There’s a few things,

  1. If you add properties to an Object, you need to keep in mind some change detection caveats. Read more here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
  2. Unless you have a reason to, there’s no need to run an init function, just set the default state for your object in the data property.
  3. When you aren’t using SFCs, props and component names need to be kebab-cased. This is because HTML attributes are case-insensitive. Read more here: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

And here’s an updated Fiddle for you: https://jsfiddle.net/jamesbrndwgn/bwsyfec0/

1 Like

Many thanks to @JamesThomson. I am again pretty impressed how thorough some people answer here in this forum. All of what you say is very helpful for me and highly appreciated.

The init function btw was indeed superfluous for this example. I am using such a function usually as ResetFunction for a form. E. g. when you edit a dataset and then use the same form to input a new dataset. I believe in this conjunction it makes sense, doesn’t it?!

Many thanks again and Greetins from Berlin (Germany)

1 Like