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

Laravel – Passing shared props through HandleInertiaRequests, cannot print the props in the vue file

have developed a laravel intertia vue project to create dashbaord using th following method:

composer require laraveldaily/larastarters --dev

php artisan larastarters:install

Selected option 1, Laravel Breeze & Inertia (Tailwind)

Now I pass a shared variable sharedata in HandleInertiaRequests
and pass it in the return object as:

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'sharedata'=> "Test data",
        'flash' => function () use ($request) {
            return [
                'success' => $request->session()->get('success'),
            ];
        },
        'showingMobileMenu' => false,
    ]);
}

Now i try to obtain the sharedata as props in my autogenerated Layouts/Navigation.vue
and try to console log the sharedata when the navbar is mounted. Following is my updated
Navigation.vue.

<template>
... content of navbar
</template>
<script>
import { onMounted } from 'vue';
import NavLink from '@/Components/NavLink.vue';
import { Link } from '@inertiajs/vue3';
import { ref } from 'vue'

export default {
    components: {
        NavLink,
        Link,
    },

    props: {
        sharedata: String
   },

    setup() {
        let showingTwoLevelMenu = ref(false);

        onMounted(() => {
        console.log('Component mounted with sharedata:', this.sharedata);
        });

        return {
            showingTwoLevelMenu
        }
    },
}
</script>

I get error that i cannot use this in the this.sharedata. Where is the problem in my code? Please provide help. Thanks in advance

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I updated the code like below and it now works

    <script>
import { onMounted,computed } from 'vue';
import NavLink from '@/Components/NavLink.vue';
import { Link,usePage } from '@inertiajs/vue3';
import { ref } from 'vue'



export default {
    components: {
        NavLink,
        Link,
    },
    

    setup() {
        let showingTwoLevelMenu = ref(false);

        onMounted(() => {
            let page = usePage()
  let sharedata = computed(() => page.props.sharedata)
        console.log('Component mounted with sharedata:', sharedata.value);
        });

        return {
            showingTwoLevelMenu
        }
    },
}
</script>

  2. 0

    The error come from that you’re trying to use this in the setup() function in Vue 3’s Composition API.

    You should access the sharedata prop directly from the props argument. So, your updated setup() function should look like this:

    setup(props) {
    let showingTwoLevelMenu = ref(false);

    onMounted(() => {
        console.log('Component mounted with sharedata:', props.sharedata);
    });

    return {
        showingTwoLevelMenu
    };
},
    Login or Signup to reply.
  3. 0

    I usually work with script setup and to access the shared data I have to use the usePgae() hook like this

    <script setup>
  import { usePage } from '@inertiajs/vue3';
  import { computed } from 'vue';
  
  let page = usePage()
  let user = computed(() => page.props.auth.user)
</script>

    other then that you can also try this

    <template>
{{ $page.props.auth.user.name }}
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search