1
resposta

[Dúvida] Como fazer uso de um componente Lavrável no AJAX

Olá eu tenho uma dúvida que já está me consumindo uns dias, eu criei uma Api no laravel, e em outro projeto estou criando o front-end, então eu criei alguns componentes e iniciei eles com uma array para testar.

                $data = [
                          [
                              'id'=>'10',
                              'checked'=>true,
                              'name'=> 'Alexandre Silva',
                              'collaborator'=> 'Motorista',
                              'star'=> 5,
                              'cover'=>'https://images....'
                              ], 
                  ]

@foreach($data as $item)
                <li id="$item['id']">
                    <!-- colaborator-rating component-->
                    <x-card.preform.colaborator-rating
                        :name="$item['name']"
                        :collaborator="$item['collaborator']"
                        :cover="$item['cover']"
                        :checked="$item['checked']">
                        <!-- prefabs.ratin component-->
                        <x-prefabs.rating :starNumber="$item['star']">
                            <a href="#"
                               class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">{{$item['star']}}</a>
                            <a href="#"
                               class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">+{{ $item['id']}}
                                Viagens </a>
                        </x-prefabs.rating>
                        <!-- prefabs.ratin component-->
                    </x-card.preform.colaborator-rating>
                    <!-- colaborator-rating component-->
                </li>
                @endforeach

Agora em um cenário real, eu criei uma rota e um controller para buscar os dados lá da Api e faço essa requisição por este Ajax:

function carregarTabela(url, httpMethod, dados) {
        $.ajax({
            url: url,
            method: httpMethod,
            data: dados,
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            success: function (response) {
                response.data.forEach(
                    element => $('#minha-lista').append()
                );

            },
            error: function (response) {
            }
        });
    }

como eu posso instanciar o meu componente no elemento #minha-lista, essa seria uma boa abordagem ou tem uma outra forma de trazer esses dados sem refresh?

1 resposta

Olá Wedson, tudo bem?

Pelo que entendi, você está buscando uma forma de instanciar o seu componente no elemento #minha-lista sem precisar dar um refresh na página. Uma maneira de fazer isso é utilizando o método append do jQuery para adicionar o componente à lista.

No seu código AJAX, você pode fazer o seguinte:

success: function (response) {
    response.data.forEach(function (element) {
        // Crie uma variável para armazenar o HTML do seu componente
        var componentHTML = `
            <li id="${element.id}">
                <!-- colaborator-rating component-->
                <x-card.preform.colaborator-rating
                    :name="${element.name}"
                    :collaborator="${element.collaborator}"
                    :cover="${element.cover}"
                    :checked="${element.checked}">
                    <!-- prefabs.ratin component-->
                    <x-prefabs.rating :starNumber="${element.star}">
                        <a href="#"
                           class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">${element.star}</a>
                        <a href="#"
                           class="text-xs px-1 font-medium text-primary-900 underline hover:no-underline dark:text-white">+${element.id}
                            Viagens </a>
                    </x-prefabs.rating>
                    <!-- prefabs.ratin component-->
                </x-card.preform.colaborator-rating>
                <!-- colaborator-rating component-->
            </li>
        `;

        // Adicione o componente à lista usando o método append do jQuery
        $('#minha-lista').append(componentHTML);
    });
},

Dessa forma, o seu componente será instanciado dinamicamente no elemento #minha-lista a cada requisição AJAX bem-sucedida.

Espero ter ajudado! Bons estudos!