如何使 Laravel/Vue 实现显示单个条目

Question

我正在尝试将 Laravel 与 Vue 集成，并进一步集成 Nuxt，希望我可以将像 http://page-transitions.com 上显示的时髦页面转换集成到我的网站中。

我一直在阅读有关在 Laravel 中使用 Vue 的教程； https://scotch.io/tutorials/build-a-guestbook-with-laravel-and-vuejs，我很高兴地发现 Laravel 附带了 Vue 实现，所以我认为有很多关于如何结合使用这两者的信息，但似乎没有。

我完成了教程并按照描述制作了留言簿。我现在正试图以此为基础。

具体来说，我正在尝试为每个留言簿条目创建单独的页面。

我确实有很多使用 Laravel 的经验，但只是我上面描述的 Vue。

所以，为了创建单独的页面，我在 routes/web.php 文件中创建了一个新路由；

Route::get('signature/{id}','SignaturesController@show')->name('signature');

然后我在app/Http/Controllers/SignaturesController.php 中创建了一个新的代码块来处理这个请求；

public function show() { return view('signatures.signature'); }

我已经在resources/views/signatures/signature.php中创建了指定视图；

@extends('master')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <signature></signature>
            </div>
        </div>
    </div>
@endsection`

我已经在resources/assets/js/components/Signature.vue中创建了应该与这个视图集成的vue文件；

<template>
    <h1>Signature</h1>
</template>

<script>
    export default {

    }
</script>

最后，我在resources/assets/js/app.js 中注册了组件并重新运行npm run dev。

这对 extnet 有效，我可以在预期的 url 查看文件； http://transitions.localhost/signature/1.

我的问题是，如何将ID为1的签名相关的数据获取到页面中？我什至无法回显{{ id }} 或{{ signature }}。

您发现对本主题有帮助的任何其他资源也将不胜感激。感谢您花时间阅读所有这些内容，有人知道我从哪里开始吗？

Answer 1

您需要将数据传递给您的 vue 组件

也许是这样的？

在你看来：

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <signature :signature="{{ $signature }}"></signature>
            </div>
        </div>
    </div>
@endsection

在你的 vue 组件中：

<template>
    <h1>This signature has the ID of: {{ signature.id }}</h1>
</template>

<script>
    export default {
        props: ['signature']
    }
</script>