conditional-container
conditional-container copied to clipboard
Updated to work with Nova 4 and Vue 3
Main changes
Changed the way Vue knows when a field is updated. Previously it would watch it by accessing the parent component and then loop through its children to watch all of the relevent components. This no longer works in Vue 3 due to there no longer being one single "root" element. I replaced this with a custom Vue mixin: CheckableValues
, which emits events whenever the field changes values using the Nova integrated Tinybus package.
I was also required to change the way that the Vue code was compiled, as well as some other package changes and updates.
There are also some very minor changes to the Php.
Notes
In field.js
, I had to use a loop to repeatedly check if it's is the correct time to add the mixin to the conditional fields. There is almost certainly a better way to do this but this current method works regardless.
I have tested with most of the basic field types, but some of the more obscure and external fields might not work out of the box.
Resolves #78 @milewski Resolves #76 @dees040
Hi @liam-simmons thanks for this PR!
I tried it out but it doesn't seem to be working for update... I spent some time trying to figure out what was wrong but no luck so far
For example, this is what I tried:
The name field is conditional...
Select::make('Option', 'option')
->options([
1 => 'Option 1',
2 => 'Option 2',
3 => 'Option 3',
]),
ConditionalContainer::make([
Text::make('Name', 'name')
->rules('required', 'max:255')
])->if('option = 1'),
Textarea::make('Description', 'content->description'),
However, when submitting the form, the name field is not included on the payload..

This feature is now built-in to Nova 4 no ?
https://nova.laravel.com/docs/4.0/resources/fields.html#dependent-fields
@vesper8 nova version works a bit differently from this package... I think the DX of this package was better and I found the nova dependsOn not working for me with some third-party packages...