Question 17678 in Laravel Question posted in
The official Laravel Documentation can be found here.

inertia + vue, send props to sub components? – Laravel

I have two components :

  • Page.vue
    • Component.vue

In my Laravel route I do

return inertia('Page', [ 'foo' => Model::all()->map(...) ]);

In Page I do:

<template> 
  <Component/>
</template>
<script setup>
    defineProps({ foo: Array });
</script>

Would it be possible to access foo, without transiting by Page? When using nested components. It looks cumbersome to always forward props like <Component :foo='foo'>.

In this case, only Component use foo which is not directly used in Page.

Tags:

2

Answers


  1. 0

    This video on Laracasts is a great starting point for your topic https://laracasts.com/episodes/2404

    Login or Signup to reply.
  2. 0

    You can share a prop data to a subcomponent this way:

    Route:

    Route::get('/example', function () {
    return inertia('Page', [
        'someData' => 'foo'
    ]);
});

    1st component (Page.vue) – Here you pass in the data to the subcomponent:

    <template>
  <Component :someData="$page.props.someData" />
</template>

<script setup>
  import Component from '../Pages/Component.vue'
</script>

    2nd component (Component.vue) – And here you retrieve it:

    <template>
  {{ someData }}
</template>

<script setup>
  const props = defineProps({
    someData: String,
  })

  const someData = props.someData
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search