Bubble sorting in vue.js

Question

Bubble sorting in vue.js

Navigation

#1 by (1 votes)

2

good is starting with a small exercise and I decided to make a bubble order with objects and my code is the code is here, but I want to order but I do not know how to help!

var app = new Vue ({
    el: '.contenedor',
    data:{
        titulo: 'Horario',
        contenido : 'Ingresa el nombre de la  materia',
        contenido2: 'Ingresa la hora en la que ingresas',
        contenido3: 'hora',
        contenido4: 'Minutos',
        materias : [{nombre: 'Ejemplo', hora : 24, min: 00}],
        auxNombre: '',
        auxHora : '',
        auxMin: '',
    },
    methods : {
        agregar : function (){
            this.materias.push ({nombre: this.auxNombre, hora: this.auxHora, min:this.auxMin});
            this.auxNombre = '';
            this.auxHora = '';
            this.auxMin = '';
            ordenar ();
        },
        eliminar : function (indice){
            this.materias.splice(indice, 1);
        },
    }
});

 var ordenar = () =>{
    var pos = app.materias.lenght;
    let aux;
    console.log ('se actualizado tu arra tiene ${pos}')
   for (let i = 0; i<app.materias.lenght; i++){
       if (materias[i].hora<materias[i+1].hora){
        aux = materias[i];
        materias[i]= materias[i+1];
        materias [i+1] = aux;
        aux = 0;
       }
   }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Horario</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>
    <div class="contenedor">
        <h1 align="center">{{titulo}}</h1>
        <h2 >{{contenido}}</h2>
        <input type="text" v-model="auxNombre" placeholder="Nombre de la Materia" class="form-control">
        <h2>{{contenido2}}</h2>
        <h2>{{contenido3}}</h2>
        <input type="text" v-model="auxHora" placeholder="Hora" class="form-control">
        <h2>{{contenido4}}</h2>
        <input type="text" v-model="auxMin" placeholder="Minutos" class="form-control">
        <br>
        <br>
        <button @click="agregar" class="btn btn-primary"> Finalizar </button>
        <h1>Tu horario Final</h1>
        <ul class="list-group">
            <li v-for="(materia, indice) of materias" class="list-group-item">
                {{materia.nombre}}
                <span class="pull-right"><button @click="eliminar(indice)" class="btn btn-danger" >Eliminar</button></span>
                <span class="pull-right">&nbsp; &nbsp; &nbsp; </span>
                <span class="pull-right">{{materia.hora}}:{{materia.min}}</span>
            </li>
            
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="main.js"></script>
</body>
</html>

javascript vue.js

asked by fernando quinteros gutierrez 18.09.2018 в 01:53

source

1 answer

How to move an image that I am inserting canvas with the mouse Validate FLOAT data entry [duplicate]

score 1 · Accepted Answer

You have several errors. First to know the amount of values in the array matters you must use .length . Then, the ordenar function can be a method of your Vue. It would stay like this:

var app = new Vue ({
    el: '.contenedor',
    data:{
        titulo: 'Horario',
        contenido : 'Ingresa el nombre de la  materia',
        contenido2: 'Ingresa la hora en la que ingresas',
        contenido3: 'hora',
        contenido4: 'Minutos',
        materias : [{nombre: 'Ejemplo', hora : 24, min: 00}],
        auxNombre: '',
        auxHora : '',
        auxMin: '',
    },
    methods : {
        agregar : function (){
            this.materias.push ({nombre: this.auxNombre, hora: this.auxHora, min:this.auxMin});
            this.auxNombre = '';
            this.auxHora = '';
            this.auxMin = '';
            this.ordenar ();
        },
        eliminar : function (indice){
            this.materias.splice(indice, 1);
        },
        ordenar : function (){
          var pos = app.materias.length;
          let aux;
          //console.log ('se actualizado tu arra tiene ${pos}')
          for (let i = 0; i<app.materias.length - 1; i++){
             if (app.materias[i].hora>app.materias[i+1].hora){
              aux = app.materias[i];
              app.materias[i]= app.materias[i+1];
              app.materias [i+1] = aux;
              aux = 0;
             }
         }
       }
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Horario</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <div class="contenedor">
        <h1 align="center">{{titulo}}</h1>
        <h2 >{{contenido}}</h2>
        <input type="text" v-model="auxNombre" placeholder="Nombre de la Materia" class="form-control">
        <h2>{{contenido2}}</h2>
        <h2>{{contenido3}}</h2>
        <input type="text" v-model="auxHora" placeholder="Hora" class="form-control">
        <h2>{{contenido4}}</h2>
        <input type="text" v-model="auxMin" placeholder="Minutos" class="form-control">
        <br>
        <br>
        <button @click="agregar" class="btn btn-primary"> Finalizar </button>
        <h1>Tu horario Final</h1>
        <ul class="list-group">
            <li v-for="(materia, indice) of materias" class="list-group-item">
                {{materia.nombre}}
                <span class="pull-right"><button @click="eliminar(indice)" class="btn btn-danger" >Eliminar</button></span>
                <span class="pull-right">&nbsp; &nbsp; &nbsp; </span>
                <span class="pull-right">{{materia.hora}}:{{materia.min}}</span>
            </li>
            
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="main.js"></script>
</body>
</html>