如何显示惯性数据到Vue组件?

uelo1irk  于 2022-11-25  发布在  Vue.js
关注(0)|答案(3)|浏览(128)

在Vue Inspector中,我实际上得到了消息,但我不确定如何在Vue组件上使用它。
请查看图片链接
https://ibb.co/2KTmstS
我正在使用Inertia helper方法并向Vue Components发送消息,但没有任何效果。

public function contact_to_project(){
    $message = "My message!";
    return Inertia('Contact_to_project', [
        'message' => $message
    ]);

}

我的Vue组件

<template> {{message}}</template>

<script>
  export default {
     props: {
        message: String,
     },
  }
</script>
b1zrtrql

b1zrtrql1#

  • 我不确定您问题的措辞。我猜您的意思是您想知道如何在重定向时使用闪存数据以外的内容。*

使用Inertia.js传递数据

将数据传递给惯性是非常简单的。
首先,设置一个控制器方法,该方法返回一个inertia响应,其中包含要作为属性传递给组件的数据。

class HomeController extends Controller
{
    public function show()
    {
        return inertia('ContactPage', [
            'message' => 'My message!',
        ]);
    }
}

然后使setup成为您的Vue.js组件

<template>
    <div>
        {{ message }}
    </div>
</template>

<script>
    export default {
        props: {
            message: String,
        }
    }
</script>

那么你就可以走了!你现在应该可以看到My message!,当你走到与你的控制器对应的路线时。

无重定向的Flash消息

在Inertia.js中访问闪存数据并不比在一个普通的Laravel应用程序中更难。你走在正确的轨道上,但似乎不知道如何在不使用重定向的情况下闪存数据。
在Laravel中,闪存数据存储在请求的会话中。因此,如果您想在当前请求中设置消息,请按如下方式操作:

request()->session()->flash('status', 'Task was successful!');

之后,您只需按照Inertia.js文档渲染Vue.js组件。
在您的情况下,它看起来像这样:

public function contact_project(){
    $user = User::find(Auth::id())->has_many_through_projects_contents();
    $message = $user->paginate(1);

    request()->session()->flash('message', $message);

    return inertia('Contact_to_project');
}

然后像你在问题中提到的那样访问它。

<div v-if="$page.props.flash.message" class="alert">
    {{ $page.props.flash.message }}
</div>
628mspwn

628mspwn2#

根据您在vue component中的问题,您可以将数据定义为props,然后在template中显示它,如下例所示:

<script setup>

import { Inertia } from '@inertiajs/inertia';

const props = defineProps({
    message: {
        type: String
    },
});

</script>

<template>
    <div>{{props?.message}}</div>
</template>
wh6knrhe

wh6knrhe3#

您没有以正确的方式访问属性。由于props是您从服务器发送的所有数据的 Package ,因此您访问它们的方式是首先使用props。

<template> {{props.message}}</template>

相关问题