2

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', 'Admin\MinistryController');

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>

2 respuestas 2

1

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>
3
  • ¿Y que cambiaría si utilizara un componente? planeaba hacerlo así después. el 14 feb. 2018 a las 3:03
  • Si usaras un componente en un archivo externo (.vue), sí podría ser una buena idea usar axios y solicitudes ajax, pero entonces no pasarías la colección de modelos a la vista, pues sería un poco redundante, la solicitud ajax iría a otra ruta, y esa ruta entregaría el json.
    – Shaz
    el 14 feb. 2018 a las 3:06
  • de echo es mas facil con pops y vue router para navegar entre componentes y pasar variables entre los mismos sin llegar a utilizar axios solo salvo ciertas cosas, pero llege tarde :(
    – Dohko19
    el 15 jun. 2020 a las 14:01
0

Excelente la respuesta sugerida por Shaz, solo haría una pequeña adición a su respuesta y es que los datos deben enviarse desde el controlador en formato json o cuando lo reciba el objeto data de vue pasarlo así:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.