0

Esta es mi instancia de VUE; En ella creo 2 array's para que se alimenten de datos tipo JSON. He incluido comentarios para que puedan apreciar los puntos claves del código como la ubicación de los arreglos.

var app = new Vue({
    el: "#app2",
    data: {
    // Estos arrays deben quedar ordenados de manera ascendente y el otro descendente
    listaSenadores: [],
    Senadores2: []
    },
    created(){
    //llenar los datos
    this.cargaSenadores();
    },
    
    methods:{
    cargaSenadores(){
          fetch(urlSenate, initHeader).then(function(response){
            return response.json()
          }).then(this.asignarDatos).then(this.sortedArray)
        },
        asignarDatos(data){
          this.listaSenadores = data.results[0].members;
          this.Senadores2 = data.results[0].members;
          //console.log(this.listaSenadores);
        },
          // Esta funcion ordena cada array de manera ASC y DSC para se mostrado en las 2 tablas
        sortedArray(){
            this.listaSenadores = this.listaSenadores.sort((a, b) => a.missed_votes - b.missed_votes );
            this.Senadores2 = this.Senadores2.sort((a, b) => b.missed_votes - a.missed_votes );
            return
        }
    }
  });

Y este es mi código HTML. Si pueden apreciar uso 2 tbody para poner ahí los datos (por cada arreglo); pero no se porque siempre muestra el resultado del primero en la segunda tabla.

<div id="app2" class="container">
           <div class="row">
             <div class=" col1 col-6 col-sm-6 col-md-6 ">
                   <br>
                   <h2>Más comprometidos (10% superior del partido)</h2>
                   <table class="table table-striped">
                       <thead>
                       <tr>
                           <th>Nombre completo</th>
                           <th>Votos Perdidos</th>
                           <th>% Perdida</th>
                       </tr>
                       </thead>
                       <tbody id="senate-data" v-for="member in listaSenadores"><!-- Acá el primer array-->
                       <td><a v-bind:href="member.url" self="_blank">{{member.last_name + " " + (member.middle_name == null ? "" : member.middle_name + " ") + member.first_name}}</a> </td>
                       <td>{{member.missed_votes}}</td>
                       <td>{{member.missed_votes_pct}}</td>
                       </tbody>
                   </table>
               </div>
               <div class=" col2 col-6 col-sm-6 col-md-6 ">
                       <br>
                       <h2>Menos comprometidos (10% inferior del partido)</h2>
                       <table class="table table-striped">
                           <thead>
                               <tr>
                                   <th>Nombre completo</th>
                                   <th>Votos Perdidos</th>
                                   <th>% Perdida</th>
                               </tr>
                           </thead>
                           <tbody id="senate-data2" v-for="member in Senadores2"><!--Aca el segundo array-->
                           <td><a v-bind:href="member.url" self="_blank">{{member.last_name + " " + (member.middle_name == null ? "" : member.middle_name + " ") + member.first_name}}</a> </td>
                           <td>{{member.missed_votes}}</td>
                           <td>{{member.missed_votes_pct}}</td>
                           </tbody>
                       </table>
                   </div>
               </div>
           </div>
       </div>

Resultado: Muestra los mismos datos en ambas tablas y he probado con v-bind:ID entre otros

1
  • En asignarDatos(data) asignas los mismos valores a las ambas arrays. Es esa tu intencion?
    – milmal
    el 26 ene. 2021 a las 5:34

1 respuesta 1

0

Yo utilizaría computed properties. No necesariamente es la única solución:

methods:{
    cargaSenadores(){
      fetch(urlSenate, initHeader).then((response) => {
        return response.json()
      }).then((data) => this.asignarDatos(data));
    },
    asignarDatos(data){
      this.listaSenadores = data.results[0].members;
    },
},
computed: {
    listaSenadoresAsc() {
        return this.listaSenadores.slice().sort((a, b) => a.missed_votes - b.missed_votes );
    },
    listaSenadoresDsc() {
        return this.listaSenadores.slice().sort((a, b) => b.missed_votes - a.missed_votes );
    }
}

Luego se haría la iteración con cada lista usando la directiva v-for en el html.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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