时间戳

首页 > 解决方案 > 如何使 Laravel/Vue 实现显示单个条目

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

问题描述

我正在尝试将 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`

我已经创建了应该与这个视图集成的 vue 文件resources/assets/js/components/Signature.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 }}。

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

标签： javascriptphplaravelvue.jsvuejs2

解决方案

您需要将数据传递给您的 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>

推荐阅读