Search code examples
laravelelement-uiinertiajs

How to go back on click of a button from the .vue without opening a new window?


I'm trying to create a button that goes back to the login, or redirects to /login, currently I've tried doing it both with el-button and inertia-link, they both work but not how I would like.

This is the code i've already tried to get the inertia-link to work:

<el-button-group style="margin-left: 53%; margin-bottom: 10px">
    <inertia-link class="el-button--info" :href="'/login'">
        <i class="fas fa-chevron-left"></i>
    </inertia-link>

    <el-button
        :type="getStatus()"
        :loading="loading"
        @click="submit()">Enviar Link
    </el-button>
</el-button-group>

Code with el-button:

<el-button-group style="margin-left: 53%; margin-bottom: 10px">
    <el-button
        type="info"
        icon="fas fa-chevron-left"
        @click="redirect()"
>
    </el-button>

    <el-button
        :type="getStatus()"
        :loading="loading"
        @click="submit()">Enviar Link
    </el-button>
</el-button-group>


methods() {
    redirect(){ 
        window.open('/login');       
    }
}

With the inertia-link it's ugly, the class doesn't look right if I just put class="el-button" it works but I need to add a el-button type as info, how I have it right now as class="el-button--info" it doesn't work. With the el-button it opens another tab, I want to stay on the same page, just go to the login page like the inertia-link does.


Solution

  • You can use the visit method from Inertia:

    redirect() {
        this.$inertia.visit('/login');
    }
    

    For some reason it has been lost in the docs, but you can still find it in the history on Github: https://github.com/inertiajs/inertia-vue/tree/2c6da0ccb9b4f80c94650ba687cfad0073f3f0c2#manually-making-visits