Como pasar datos de una vista a otra con Vue y axios en Laravel

publicado por: Anonymous

Estoy trabajando con Laravel y tengo este enlace en la vista A

<div id="app">
    <a href="{{ route('ministries.index') }}">Enlace</a>
</div>

y quiero que al hacer click sobre ese enlace lo dirija a la vista B y me muestre los resultados obtenidos por el controlador.

Esta es la ruta que tengo:

Route::resource('ministries', 'AdminMinistryController');

Codigo de Vue:

new Vue({
    el: '#app',
    data: {
        ministries: []
    },
    created: function() {
        this.getMinistries()
    },
    methods: {
        getMinistries: function() {
            var url= 'ministries';
            axios.get(url).then(response => {
                this.ministries = response.data
            });
        }
    }
});

Codigo del controlador:

public function index() {
    return Ministry::orderBy('id', 'DESC')->get();
}

El HTML de la vista B

<tbody>
    <tr v-for="ministry in ministries">
        <td>@{{ ministry.id }}
        <td>@{{ ministry.name }}
    </tr>
</tbody>

solución

En este caso sí es necesario que el controlador entregue una vista como respuesta (la vista B):

public function index()
{
    $variable = Modelo::orderBy('id', 'desc')->get();
    return view('vista', compact('variable'));
}

En cuanto a Vue, no es necesario usar axios (el cual se utiliza para hacer solicitudes Ajax), pues obtienes los datos directamente de Laravel, y tienes la información disponible en blade, simplemente agregas el modelo al objeto data, el cual tiene reactividad, todo esto siempre y cuando no estés usando componentes (según tu sintaxis, no pareciera):

new Vue({
    el: '#app',
    data: {
        ministries: {!! $variable !!}
    },
});

El template se mantendría como lo tienes:

<tbody>
    <tr v-for="ministry in ministries">
        <td>@{{ ministry.id }}</td>
        <td>@{{ ministry.name }}</td>
    </tr>
</tbody>
Respondido por: Anonymous

Leave a Reply

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