如何向 Vue Comp.nets 显示惯性数据？

Question

在 Vue Inspector 中，我实际上收到了消息，但我不确定如何在 Vue 组件上使用它。

请查看图片链接

https://ibb.co/2KTmstS

我正在使用 Inertia 辅助方法并向 Vue 组件发送消息，但没有任何效果。

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

}

我的 Vue Comp.nets

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


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

Answer 1

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

<script setup>

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

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

</script>

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

Answer 2

我不确定你的问题的措辞。 我猜你的意思是你想知道如何在重定向时使用闪存数据。

使用 Inertia.js 传递数据

将数据传递给惯性非常简单。

首先，您设置一个控制器方法，该方法返回一个inertia响应，其中包含您想要作为道具传递给组件的数据。

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

然后设置你的 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>

Answer 3

您没有以正确的方式访问该物业。 由于props是您从服务器发送的所有数据的包装器，因此您访问它们的方式是首先使用 props。

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