Tabla reactiva


#1

Duda: En mi proyecto estoy generando una tabla de manera dinamica mi pregunta es una vez que tenga el html generado es posible recorrerlo mediante Vuejs y hacerle actualizaciones cada segundo a esta tabla por ejemplo si se agrega una celda nueva o cambiarle de color a una celda que actualice mi html, si pudieran explicarme o darme un ejemplo se los agradeceria mucho.

o crear un componente Vuejs de una tabla y generarlo de manera dinamica?

<div class="panel-block">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
    <tr>
    @php($Contador=0)
    @foreach($servidor as $server )
        @if ($Contador!=0 && $Contador%15==0)
            <tr></tr>
        @endif
        <td class="has-text-centered">
            {{--<a  href="{{ route('servidor.detalles',$server->slug) }}" title="{{$server->nombre_servidor}}" class="has-text-primary">  {{ $server->id}}</a>--}}
            <a href="{{ route('servidor.detalles',$server->slug) }}" data-tooltip="Nombre Servidor : {{$server->nombre_servidor ." IP : ". $server->servidor}} " class="has-text-primary tooltip is-tooltip-primary is-tooltip-multiline"> <strong> {{ $server->id}}</strong></a>
        </td>
        @php($Contador++)
        @endforeach
        </tr>
</table>

#2

La manera correcta seria lo segundo, crear un componente que genere la tabla a partir del data que le otorgues. Cuando actualizes el data, vuejs se encargara por ti de actualizar el html.

El schema del data podria ser algo como [{ rowId: 1, cell1, cell2}, {...}].

Puedes tomar ejemplo de Vuikit Table, pero la tabla hace mas de lo que necesitas, por lo que tan solo tomalo como base.


#3

para la actualizacion de la data, VueJs tiene una funcion para actualizado automatico o se activa mediante un parametro los segundos, otra cosa que tan dificil es conectarlo a un websocket estoy desarrollando un app con laravel y quiero mezclar los websockets con VueJs.


#4

Vue es reactivo, cuando actualizes la data vue actualizara automaticamente el html de los componentes correspondientes.

No sabria decirte sobre los websockets.


#5

no entendi muy bien lo ultimo, “cuando actualizes la data vue actualizara automaticamente el html de los componentes correspondientes.” entonces yo le pondria el tiempo para que actualice los datos o que haga de nuevo la consulta, si es asi tendras un ejemplo yo apenas estoy empezando con Vuejs, quiero hacer algo similar a esto: http://bl.ocks.org/erlenstar/9421804


#6

Si, tu decides cuando actualizar la data y el como, por ajax por ejemplo, y cuando obtengas el resultado lo guardas en el objeto Vue, el detecta el cambio y actualiza la plantilla. Es similar a react y otros sistemas reactivos, puedes leer mas en la introduccion.

Para el ejemplo que muestras Vue o React son lo mas adecuado.


#7

Excelente, voy a leerlo gracias :smiley:.