时间戳

首页 > 解决方案 > 访问 Vue 模板中的所有 Laravel 路由

javascript - 访问 Vue 模板中的所有 Laravel 路由

问题描述

我基本上是在尝试使用 Laravel 中的 Vue 创建某种动态表。我已成功创建表并通过 jquery 的$.getJSON方法获取数据。我真的很想在表格中有一个链接，它可以通过使用 Laravel 的方法指向一个 URL，route()因为我有许多不同的路由我想使用。

这种情况下的示例是该表包含所有用户的列表，我希望每个用户都有一个查看用户链接。但是我无法访问route()Vue 组件内部的 Laravel。

让这个问题成为一个非常简短的问题：除了向模板上的属性字段添加单个路由之外，还有什么方法可以访问 Laravel 拥有的所有路由，如下所示：

<user-table-component dataRoute="{{ route('datatable.users') }}">
</user-table-component>

我愿意就如何以另一种方式解决此问题提出建议。另外，这里是模板：

<template>

    <table>
        <thead>
            <tr>
                <td v-for="header in json.headers" :key="header">{{ header }}</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="user in json.rows.data" :key="user">
                <td><a href="THIS WOULD BE AN VIEW USER LINK">{{ user.name }}</a></td>
                <td>{{ user.email }}</td>
                <td>{{ user.created_at }}</td>
            </tr>
        </tbody>
    </table>

</template>



<script>
    module.exports = {
        name: 'user-table-component',
        props: ['dataroute'],

        data: function(){
            return {
                json: []
            }
        },

        // This is auto-run when the Vue app is booted up
        mounted() {

            // Closure to accept component in the callback below
            var self = this;
            $.getJSON(this.dataroute, function(json) {
                self.json = json;
            });
        }
    }
</script>

标签： javascriptlaravelvue.jsroutes

解决方案

用这个

https://github.com/tighten/ziggy

然后在Javascript中你可以使用route('route.name')

推荐阅读