CODEWITHSUNDEEP
phplaravelvue.jsvuejs2
softya
softya

Reputation: 260

set laravel variable in vuejs

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

Upvotes: 2

Views: 1577

Answers (1)

akalucas
akalucas

Reputation: 476

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>

Upvotes: 1

Related Questions