Pass data from blade to vue and keep parent-child in sync?

I know that in Vue parents should update the children through props and children should update their parents through events.

Assume this is my parent component .vue file:

<template>
<div>
<my-child-component :category="category"></my-child-component>
</div>
</template>

<script>
export default {
data: {
return {
category: 'Test'
}
}
}
</script>

When I update the category data in this component, it will also update the category props in my-child-component.

Now, when I want to use Vue in Laravel, I usually use an inline template and pass the value from the blade directly to my components (as for example also suggested at https://stackoverflow.com/a/49299066/2311074).

So the above example my my-parent-component.blade.php could look like this:

@push('scripts')
<script src="/app.js"></script>
@endpush

<my-parent-component inline-template>
<my-child-component :category=""></my-child-component>
</my-parent-component>

But now my-parent-component is not aware about the data of category. Basically only the child knows the category and there is no communication between parent and child about it.

How can I pass the data from blade without breaking the parent and child communication?

from Newest questions tagged laravel-5 – Stack Overflow https://ift.tt/2HS2JeM
via IFTTT

Related Posts

Codeigniter : Parse error: syntax error, unexpected ‘const’ (T_CONST), expecting variable (T_VARIABLE) in Laravel project

I’m getting following error: **Parse error: syntax error, unexpected ‘const’ (T_CONST), expecting variable (T_VARIABLE)** Note : It’s working in local but facing issue in production server. private…

Firebase receive notification while tab is active or on focus

What i want is to be able to perform an action when a user receives a notification while the browser is open and tab is active or…

Laravel’s alias loader does not find class

We have a legacy project that we cannot update and we need to make some changes in symfony’s Response.php in vendor. We have solved this by copying…

Laravel 5 – generic document management

I have a system where you can create different types of unique documents. For instance, one document is called Project Identified and this expects certain inputs. Originally,…

Laravel Nova limit the results in indexQuery

I ran intro a situation where I need to limit the results of a resource to only 3 results. To be more specific, based on the logged…

Auditoria en laravel 5.8 [closed]

Cómo puedo automatizar el registro de actividades de un usuario en laravel? Si un usuario ingresa a un app de laravel, debo guardar toda su actividas, a…

Leave a Reply

Your email address will not be published.