laravel 通过HandleInertiaRequests传递共享props，无法打印vue文件中的props

yx2lnoni 于 12个月前发布在其他

关注(0)|答案(3)|浏览(181)

我已经开发了一个laravel intertia vue项目，使用以下方法创建dashbaord：
第一个月
php artisan larastarters:install个
选择选项1，Laravel Breeze & Inertia（Tailwind）
现在，我在HandleInertiaRequests中传递一个共享变量sharedata，并将其作为返回对象传递：

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,
    ]);
}

字符串
现在我尝试在自动生成的Layouts/Navigation.vue中获取共享数据作为 prop ，并尝试在导航栏挂载时控制台记录共享数据。以下是我更新的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>

型
我在this.sharedata中出现错误，无法使用this。问题出在我的代码中？请提供帮助。提前感谢

laravel

来源：https://stackoverflow.com/questions/77378382/passing-shared-props-through-handleinertiarequests-cannot-print-the-props-in-th

3条答案

按热度按时间

mv1qrgav1#

这个错误来自于你试图在Vue 3的Composition API的setup（）函数中使用这个。
您应该直接从props参数访问sharedata prop。因此，更新后的setup（）函数应该如下所示：

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

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

    return {
        showingTwoLevelMenu
    };
},

字符串

赞(0）回复(0）举报 12个月前

ylamdve62#

我通常使用脚本设置来访问共享数据，我必须像这样使用usePgae（）钩子

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

字符串
除此之外，你也可以试试这个

<template>
{{ $page.props.auth.user.name }}
</template>

型

赞(0）回复(0）举报 12个月前

kb5ga3dv3#

我更新了下面的代码，现在它可以工作了。

<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>

字符串

赞(0）回复(0）举报 12个月前

我来回答

laravel 通过HandleInertiaRequests传递共享props，无法打印vue文件中的props

3条答案

相关问题

热门标签

最新问答