Passing variable form blade template to vue component

Question

I have a form in blade template. iF I submit the form I would like to pass id variable to vue component. How can I do it. Please help. Below my code.

<table>
@foreach($zam as $z)
<tr>
    <td>{{$z->id}}</td>
    <td>{{$z->name}}</td>
    <td>{{$z->status}}</td>
    <td>{{$z->getUser->name}}</td>
    <td>
        <form method="POST" action="{{route('mod_zam')}}">
            @csrf
            <select name="status">
                <option value="przyjete"> przyjete</option>
                <option value="realizowane"> realizowane</option>
                <option value="wyslane"> wyslane</option>
            </select>
            <input type="hidden" name="id" value="{{$z->id}}" />
            <input type="submit" name="modyf" />
        </form>
    </td>
</tr>
@endforeach
</table>



 <ex id=???></ex>

I'm considering doing this in my blade:

const app = new Vue({
el: '#app',
data: {

 },
 });

But it's not working in blade. My second question - is it possible to create vue instance directly in blade, not via component?

Alexander Villalobos Alexander Villalobos · Accepted Answer · 2018-11-15T18:50:56

To pass down data to your components you can use props.

You can do something like:

<component is="component" :zID="{{ $z->id }}"></component>

And then in your Example.vue file you have to define your prop. Then you can access it by this.zID.

<script>
  export default {
  props: ['zId'],
  mounted () {
    // Do something useful with the data in the template
    console.dir(this.zId);
    }
  }
</script>

Passing variable form blade template to vue component

2 Answers