diff --git a/README.md b/README.md index 95b803f..8870fa7 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,15 @@ In the first above, we used the `ref` and `computed` functions from Vue's Compos - `computed` - `inject` - `nextTick` +- `onActivated` +- `onBeforeMount` +- `onBeforeUnmount` +- `onBeforeUpdate` +- `onDeactivated` +- `onErrorCaptured` - `onMounted` +- `onUnmounted` +- `onUpdated` - `provide` - `reactive` - `readonly` @@ -326,9 +334,40 @@ Note that you can use `notify.loading` to check if the method is currently runni > [!WARNING] > While the original Middleware is applied to the request, you should still validate the incoming data. -#### Blade Variables +#### Pass Blade Variables as Vue Props -Public properties of the Blade Component are automatically passed as Vue props. You may even update them on the frontend, and when you call a Blade Component method, the value will be updated on the backend. The only thing you have to do is add the `VueRef` attribute to the property: +You may pass Blade variables as Vue props. This is useful if you want to pass data from the backend to the frontend. The only thing you have to do is add the `VueProp` attribute to the property: + +```php + +const defaultMessageInUpperCase = props.defaultMessage.toUpperCase(); + + + +
+``` + + +#### Pass Blade Variables as Vue Refs + +Even more powerful than passing Blade variables as Vue Props, is passing them as Vue Refs. This way, you can use the variable as a reactive variable in the template. You may update them on the frontend, and when you call a Blade Component method, the value will be updated on the backend. The only thing you have to do is add the `VueRef` attribute to the property: ```php assertSee('Nullable String:') ->assertSee('Int: 1') ->assertSee('Bool: false') - ->assertSee('Array: { "foo": "bar" }') + ->assertSee('Array: [ "foo", "bar" ]') ->assertSee('Object: { "foo": "bar" }') ->assertSee('Nullable Int:') ->assertSee('Nullable Bool:') @@ -27,7 +27,8 @@ public function it_can_pass_blade_props_as_vue_rops() ->assertSee('Nullable Object:') ->assertSee('Default Int: 1') ->assertSee('Default Bool: true') - ->assertSee('Default Array: [ "foo" ]'); + ->assertSee('Default Array: [ "foo" ]') + ->assertSee('Multiple Types: [ "foo" ]'); }); } }