1

Buenas quería saber como puedo calcular el precio total de mis productos, el fallo esta en la ultima funcion pero no se como hacer que los calcule todos, me los pone uno al lado de otro , osea los concatena en forma de string, pero con el parse tampoco me deja Dejo mi código

       const vm = new Vue({
        el: 'main',
        data: {
            nuevo_Videojuego: "",
            nuevo_Precio: "",
            totalDinero: "",
            juegos: [
                {titulo: "Spider-Man", precio: "49.99", existencias: 5, total: 0},
                {titulo: "FIFA 2019", precio: "79.99", existencias: 5, total: 0},
                {titulo: "Fortnite", precio: "0.99", existencias: 5, total: 0},
                {titulo: "Red Dead Redemption 2", precio: "59.99", existencias: 5, total: 0},
                {titulo: "Call of Duty: Black Ops 4", precio: "69.99", existencias: 5, total: 0},
                {titulo: "Destiny 22", precio: "39.99", existencias: 5, total: 0},
            ]
        },
computed:{
            totalPrecio: function () {
                var total=0;
                for (var i = 0; i < this.juegos.length; i++) {
                    total+=this.juegos[i].precio;
                }
                return total;
            }
        }
    });

3 respuestas 3

0

Lo puedes hacer de la siguiente forma

totalPrecio: function () {
  var total=0;
  for (var i = 0; i < this.juegos.length; i++) {
    total = total + this.juegos[i].precio;
  }
  return total;
}

Ya que si haces total += precio solo harás que los números se concatenen y no se sumara ninguno.

0
0

Yo lo modificaría de este modo:

  • No veo eficiente que hagas uso de un ciclo for que hace verboso tu código para una estructura como la que presentas; revisa el uso de for of
  • En el ciclo accedo a la clave de precio de esta forma: clave.precio; en este caso sería elemento.precio
  • Tomo la clave que ya declaraste en tu instancia de Vue llamada totalDinero indicando su scope por medio de this para que esta asuma el papel de acumulador de la sumatoria de precios que se irá haciendo por cada iteración que haga el ciclo
  • Dentro del ciclo hago la suma, para que acumule dichos valores
  • Por fuera del ciclo y dentro del método hago el return de la cantidad total en la variable totalDinero
  • Para evitar que los valores se concatenen, paso como parámetro al valor numérico recuperado para que lo interprete como un valor numérico en la función Number ya que como tu mismo observas el valor de precio almacenado es de tipo string
  • Por cierto tu propiedad o clave totalDinero no la iguales con unas comillas vacías puesto que lo que guardará es la sumatoria de una cantidad numérica; mejor inicializa dicha clave con 0
  • Descarta el uso de esa variable total ya que al menos hasta ahorita no veo motivo de su existencia

Código

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo de sumatoria en VueJS</title>
    </head>
    <body>
    <div id="main">
      {{ totalPrecio }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
       const vm = new Vue({
            el: '#main',
            data: {
                nuevo_Videojuego: "",
                nuevo_Precio: "",
                totalDinero: 0,
                juegos: [
                    {titulo: "Spider-Man", precio: "49.99", existencias: 5, total: 0},
                    {titulo: "FIFA 2019", precio: "79.99", existencias: 5, total: 0},
                    {titulo: "Fortnite", precio: "0.99", existencias: 5, total: 0},
                    {titulo: "Red Dead Redemption 2", precio: "59.99", existencias: 5, total: 0},
                    {titulo: "Call of Duty: Black Ops 4", precio: "69.99", existencias: 5, total: 0},
                    {titulo: "Destiny 22", precio: "39.99", existencias: 5, total: 0},
                ]
            },
             computed: {
                totalPrecio() {
                  for(elemento of this.juegos) {
                    this.totalDinero += Number(elemento.precio)
                  }
                  return this.totalDinero
                }
             }
       })
    </script>
    </body>
    </html>

0
0

Como ya indica Aprendiz en su detallada respuesta, el problema principal es que precio está definido como string, por eso el operador + realiza la concatenación en vez de la suma.

A mi entender, la suya es la respuesta correcta, yo me limito a ofrecer una alternativa, usando map para devolver un array de precios como números y reduce para hacer la suma sin usar acumuladores, pero que es una cuestión de preferencia personal en la forma de escribir código.

Yo lo haría así:

computed: {
                totalPrecio() {
                  return this.juegos.map((j) => Number(j.precio)).reduce((p1,p2) => p1 + p2, 0);
                }
             }
1
  • Además de publicar el código deberías explicar por qué consideras que el código soluciona el problema. Commented el 2 mar. 2020 a las 10:28

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.