0

tengo el siguiente problema, como hacer para mostrar una cantidad "x" de registros por paginas utilizando un select desde vue 3, tengo una idea mas menos pero no me resulta.

En mi backend tengo este metodo:

public function index()
    {
        return VisitRegistrationResource::collection(
            VisitRegistration::filter(request()
                ->only("search", "status", "searchbyname"))
                ->with('coowner')
                ->orderBy('id')
                ->paginate(
                    $perPage = 8
                )
        );
    }

lo que quiero aqui es enviarle un valor personalizado al metodo desde vue, aqui primero tengo mi useVisits.js utilizando composition api

const state = reactive({
        visits: {},
        visit: {
            id: "",
            departamento_id: "",
            nombreyapellido: "",
            rut: "",
        },
        page: 1,
        //Formularios de busqueda, aqui trabaja con los scope del backend
        form: {
            search: "",
            status: "",
            searchbyname: "",
            perPage: 5
        },
        perPage: {
            value: 8,
        },
    });

luego en mi index.Vue tengo el codigo para el select de la siguiente forma:

<div class="relative">
    <select v-model="form.perPage" class="block appearance-none md:2/8 bg-gray-200 border border-gray-200 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
</div>

Aqui mi idea es pasarle el valor del select y que este lo reciba el paginate en el metodo index, con la idea de mantener esta cantidad de registros por paginas cuando paso de una pagina a otra.

1 respuesta 1

1

No entiendo bien el problema. El pregunta es que no sabes como hacerlo en Laravel o que no sabes mandar esos parámetros al backend desde Vue.js (siento ponerlo en respuesta pero no tengo reputación)

Si es de Vue.js deberías llamar a un método fetch (tienes la info oficial aqui). Te pongo aquí un ejemplo de como sería con tú código

La url a llamar seria de la siguiente forma y en método GET

http://dominioLaravel.es/api/nombreMetodoEnRoutesApi?search=somesearch& status=somestatus&searchbyname=searchnamevalue&perPage=10

Hecho esto puedes crear un método que llame al back (ya cuando llamarlo depende de ti, puede ser un botón, al cambiar algo, etc.

created() {
    let buscar = this.search;
    let estado = this.status:
    let buscarNombre = this.searchbyname;
    let paginacion = this.perPage;

    //**NOTA**: Te he puesto los nombres de las variables del 
    //método en español para que se vean mejor en la URL, no te 
    //recomiendo que uses nombres en inglés y español. Usa uno de 
    //los dos (o todo en español o todo en inglés, pero no los mezcles).

    let url =  `http://dominioLaravel.es/api/nombreMetodoEnRoutesApi?search=${buscar}&status=${estado}&searchbyname=${buscarNombre}&perPage=${paginacion}`
    // GET request using fetch with error handling
    fetch(url)
        .then(async response => {
            const data = await response.json();

            // check for error response
            if (!response.ok) {
                // get error message from body or default to response statusText
                const error = (data && data.message) || response.statusText;
                return Promise.reject(error);
            }

            this.visits = data;
        })
        .catch(error => {
            this.errorMessage = error;
            console.error("Algo ha salido mal", error);
        });
    }

Para Laravel tienes que declarar una ruta en el fichero routes/api.php como esta:

Route::get('/nombreDeTuRutaAqui', [NombreController::class, 'index']);

Y ya en el controlador es donde aplicas la lógica:

public function index(){
    //De aqui pillas los parámetros
    $buscar = $request->query('buscar') ?? ''; //Nota el ?? '', es para que si no tiene valor lo ponga como vacío ''

    $estado = $request->query('estado') ?? '';
    $buscarNombre = $request->query('buscarNombre') ?? '';
    $paginacion = $request->query('paginacion') ?? '';

    $visits = VisitRegistration::all()
                    ->only("$buscar", "$estado", "$buscarNombre"))
                    ->with('coowner')
                    ->orderBy('id')
                    ->paginate($paginacion)
    );

    //No se si el método de búsqueda esta bien simplemente he
    //adaptado lo que tenias para que vaya con los datos de la 
    //query. Posiblemente el only deba ser un `->where`

    return Response::json($visits, tuCodigoHttpPorDefectoEs200); 

}

Tu Respuesta

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

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