Access all Laravel routes in Vue template

I’m basically trying to create some sort of a dynamic table using Vue in Laravel. I have created the table successfully and grabbing data via jquery’s $.getJSON method. I really want to have a link inside the table which would point to a URL by using Laravel’s route() method as I have many different routes that i would like to use.

Example in this case is that the table contains a list of all users, and I would like to have a view user link on each user. But i cannot access Laravel’s route() inside of a Vue component.

To make this a very short question: Is there any way to access all the routes Laravel has besides adding a single route to the attributes field on the template like so:

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

I am open for suggestions as to how I go forth about fixing this another way. Also, here is the template:

<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>

Answer

Use this

https://github.com/tighten/ziggy

Then in Javascript you can use route('route.name')

Leave a Reply

Your email address will not be published. Required fields are marked *