set laravel variable in vuejs

Question

hi i have this laravel php blade code

<tr v-for='line , id in edited_lines'>
    <td>
        @include(
            'treats.create_search_and_select',
            [
                'search_and_select' => 'user_id[]',
                'value' =>  null,
                'hidden_id' => null,
                'type' => 'all_type_of_accounts',
                'required' => 'required',
                'language' => 'account',
                'hint' => null,
                'policy' => null,
                'show_type' => 'blank',
                'rank' => null,
            ]
        )
    </td>
</tr>

now what i want is to pass value to hidden_id thats come from the v-for above like this ..

'hidden_id' => line['anything'],

so i tried this .

 'value' =>  "@{{line}}",

and this

'value' =>  "{{line}}",

and none from aboove work .. so how can i set the value or hidden_id from value come from <tr v-for='line , id in edited_lines'> thanks a lot

You can't do it. PHP gets compiled/run on the server side whereas your Vue gets compiled/run on the client side (browser). — kidA
– kidA, Commented Apr 22, 2020 at 9:34

akalucas · Accepted Answer · 2020-04-22 09:49:24Z

The main way to share (global) variables from Laravel to Vue is to:

pass a state variable via the window to your Vue application (e.g. for user info)
pass attributes to your component

There is however no way to share your hidden_id variable from Vue to Blade. I'd suggest making a component from your snippet and the content of the table row and handle everything in Vue, instead of half in Vue and half in blade.

With the state variable you can do something this like this:

<html>
<head>
    <script type="application/javascript">
        window.state = {
            my_js_var: '{{ $myPhpVar }}',
        };
    </script>
</head>
<body>

</body>
</html>

Or just pass the variable to a TableRowComponent:

TableRowComponent.vue:

<template>
    <tr v-for='item, id in items'>
        <td>
            <TreatsCreateSearchAndSelectComponent :hidden-id="item.value"/>
        </td>
    </tr>
</template>

Collectives™ on Stack Overflow

set laravel variable in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related