0

tengo este select, en el cual estoy colocando tres datos en cada item del select.

<div class="col-4">
     <div class="form-group row no-gutters mb-1">
          <label class="col-sm-7 col-form-label col-form-label-sm pr-1 text-right">Distrito</label>
          <div class="col-5">
          <select class="form-control form-control-sm" v-model="organizacion[0].c_ubig">
                  <option v-bind:value="ubigeo.c_ubig" v-for="ubigeo in ubig">
                  <tr>
                      <td>{{ ubigeo.l_ubig }}</td>
                      &nbsp; &nbsp;
                      <td>{{ ubigeo.l_prov }}</td>
                      &nbsp; &nbsp;
                      <td>{{ ubigeo.l_depa }}</td>
                  </tr>
                  </option>
          </select>
          </div>
     </div>
</div>

el cual me da como resultado lo siguiente

introducir la descripción de la imagen aquí

Como ven los datos estan desordenados y lo que deseo es ordenarlos,como si fuera una tabla,

como se muestra el la siguiente imagen

introducir la descripción de la imagen aquí

2
  • 2
    Si traes los datos desde una consulta a MySQL por ejemplo, lo puedes hacer con order by distrito desc o con order by distrito asc. Esta cláusula la puedes agregar al final de la consulta.
    – DjCrazy
    Commented el 7 nov. 2019 a las 15:10
  • Como dice @DjCrazy, ordená desde el backend. Publicá la consulta que estás haciendo con Laravel.
    – azeós
    Commented el 9 nov. 2019 a las 6:22

1 respuesta 1

2

Esto lo puede hacer con la función 'sort', en la parte de tu código en donde estes asignando el valor a tu variable 'ubig' puedes hacer esto:

this.ubig.sort(function(a, b) {
   if (a.l_ubig.toLowerCase() > b.l_ubig.toLowerCase()) {
     return 1;
   } else {
     return -1;
   }
});

Esto ordenara tu arreglo alfabéticamente usando el campo 'l_ubig' de cada objeto.

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.