0

Tengo un array donde dentro tengo 2 objetos y dentro de estos tengo otro array y dentro de este tengo otro array de detalles y ahi es donde tengo los objetos con los valores a sumar, si pongo un ejemplo seria algo asi

    "tshit": [
        {
            "id": 1,
            "selectRequi": []
        },
        {
            "id": 2,
            "cotizaciones": [
                {
                    "Bodega": "xxxx",
                    "CodigoProv": "000000",
                    "IdProv": 102,
                    "Iva": 8,
                    "RazonSocial": "xxxxxxx",
                    "SubTotal": 00.00,
                    "Iva": 00,
                    "Total": 00.00,
                    "details": [
                        {
                            "Cantidad": 4,
                            "Concepto": "ABRAZADERAS P/MUELLE 3/4 X 3\" X 18",
                            "​​​IdProd": "A000",
                            "​​​IdUnidad": "P",
                            "​​​Precio": "15.23",
                            "​ReqID": 4041
                        },
                        {
                            "Cantidad": 4,
                            "Concepto": "ABRASADERA P/MUELLE 3/4 x 3 x 18",
                            "​​​IdProd": "I174",
                            "​​​IdUnidad": "P",
                            "​​​Precio": "50.33",
                            "​​​ReqID": 4041
                        }
                    ]
                },
                {
                    "Bodega": "xxxx",
                    "CodigoProv": "000000",
                    "IdProv": 102,
                    "Iva": 8,
                    "RazonSocial": "xxxxxxx",
                    "SubTotal": 00.00,
                    "Iva": 00,
                    "Total": 00.00,
                    "details": [
                        {
                            "Cantidad": 4,
                            "Concepto": "ABRAZADERAS P/MUELLE 3/4 X 3\" X 18",
                            "​​​IdProd": "A000",
                            "​​​IdUnidad": "P",
                            "​​​Precio": "15.23",
                            "​ReqID": 4041
                        },
                        {
                            "Cantidad": 4,
                            "Concepto": "ABRASADERA P/MUELLE 3/4 x 3 x 18",
                            "​​​IdProd": "I174",
                            "​​​IdUnidad": "P",
                            "​​​Precio": "50.33",
                            "​​​ReqID": 4041
                        }
                    ]
                }
            ]
        }
    ]

aqui es donde me he quedado sin ideas la verdad, este formato lo hice porque dentro de la app web hice un drag and drop y tenia que estar ligado de alguna manera por un grupo, estoy desarrollando con VueJS, hago un

<col v-for="child in item.details"></col>

para asignar los detalles a una tabla, pero hasta aqui he dejado, tambien dejo mi codigo

                  <div>
                  <v-card elevation="3">
                    <v-responsive>
                      <v-col
                        v-for="(item, i) in tshit[1].cotizaciones"
                        :key="i"
                      >
                        <v-card-text>
                          <v-card style="border-radius: 5px">
                            <div class="titulo_flex">
                              <div class="titulo_tool">
                                <v-toolbar
                                  class="mb-2"
                                  color="#031727"
                                  dark
                                  dense
                                  style="border-radius: 5px"
                                >
                                  <v-toolbar-title>
                                    <div style="display: flex">
                                      <div
                                        style="
                                          flex: 1;
                                          margin-left: 35px;
                                        "
                                      >
                                        Razon Social:
                                        {{ item.RazonSocial }}
                                      </div>
                                      <div
                                        style="
                                          flex: 1;
                                          margin-left: 35px;
                                        "
                                      >
                                        Iva: {{ item.Iva }}
                                      </div>
                                      <div
                                        style="
                                          flex: 1;
                                          margin-left: 35px;
                                        "
                                      >
                                        Bodega: {{ item.Bodega }}
                                      </div>
                                    </div>
                                  </v-toolbar-title>
                                </v-toolbar>
                              </div>
                            </div>
                            <div class="tablareq">
                              <v-simple-table dense>
                                <template v-slot:default>
                                  <thead>
                                    <div
                                      style="
                                        display: flex;
                                        margin-left: 18px;
                                        text-align: center;
                                      "
                                    >
                                      <div style="flex: 1">Codigo</div>
                                      <div style="flex: 1">
                                        Descripcion
                                      </div>
                                      <div style="flex: 1">
                                        Cantidad
                                      </div>
                                      <div style="flex: 1">Unidad</div>
                                      <div style="flex: 1">Precio</div>
                                    </div>
                                  </thead>
                                  <v-spacer><hr /></v-spacer>
                                  <tbody id="dragTable">
                                    <draggable
                                      tag="ul"
                                      :list="item.details"
                                      group="tshit"
                                    >
                                      <div
                                        v-for="child in item.details"
                                        :key="child.IdProd"
                                        class="tabla_drag1"
                                        id="requisicionesitems"
                                      >
                                        <div style="flex: 1">
                                          {{ child.IdProd }}
                                        </div>
                                        <div style="flex: 1">
                                          {{ child.Concepto }}
                                        </div>
                                        <div style="flex: 1">
                                          {{ child.Cantidad }}
                                        </div>
                                        <div style="flex: 1">
                                          {{ child.IdUnidad }}
                                        </div>
                                        <div style="flex: 1">
                                          <v-text-field
                                            prefix="$"
                                            v-model="child.Precio"
                                            dense
                                          ></v-text-field>
                                          <!-- {{ child.Precio }} -->
                                        </div>
                                      </div>
                                    </draggable>
                                  </tbody>
                                </template>
                              </v-simple-table>
                            </div>
                          </v-card>
                          <div style="display: flex">
                            <div style="display: flex">
                              <div style="flex: 1; margin-top: 5px; margin-left: 5px;">
                                <v-text-field
                                  label="SubTotal"
                                  prefix="$"
                                  solo
                                  readonly
                                  v-model="item.subtotal"
                                  dense
                                ></v-text-field>
                              </div>
                              <div style="flex: 1; margin-top: 5px; margin-left: 5px;">
                                <v-text-field
                                  label="Iva"
                                  prefix="$"
                                  solo
                                  readonly
                                  v-model="item.neto"
                                  dense
                                ></v-text-field>
                              </div>
                              <div style="flex: 1; margin-top: 5px; margin-left: 5px;">
                                <v-text-field
                                  label="Total"
                                  prefix="$"
                                  solo
                                  readonly
                                  v-model="item.total"
                                  dense
                                ></v-text-field>
                              </div>
                            </div>
                            <div class="btndelete">
                              <v-dialog
                                transition="dialog-bottom-transition"
                                max-width="1000"
                              >
                                <template
                                  v-slot:activator="{ on, attrs }"
                                >
                                  <v-btn
                                    color="#6B0101"
                                    dark
                                    v-bind="attrs"
                                    v-on="on"
                                    >Eliminar
                                    <v-icon right dark>
                                      fa-minus-circle
                                    </v-icon></v-btn
                                  >
                                </template>
                                <template v-slot:default="dialog">
                                  <v-card>
                                    <v-toolbar color="warning" dark
                                      >Alerta pelotudo
                                      conchetumare</v-toolbar
                                    >
                                    <v-card-text>
                                      <div class="text-h2 pa-12">
                                        Deseas eliminar esta cotizacion?
                                      </div>
                                    </v-card-text>
                                    <v-card-actions class="justify-end">
                                      <v-btn
                                        text
                                        @click="
                                          (dialog.value = false),
                                            delQuo(item)
                                        "
                                        >Si</v-btn
                                      >
                                      <v-btn
                                        text
                                        @click="dialog.value = false"
                                        >No</v-btn
                                      >
                                    </v-card-actions>
                                  </v-card>
                                </template>
                              </v-dialog>
                            </div>
                          </div>
                        </v-card-text>
                      </v-col>
                    </v-responsive>
                  </v-card>
                </div>

hasta aqui he llegado... espero y me puedan orientar un poco

3
  • No entiendo realmente qué valores son los que quieres sumar y dónde necesitas el resultado Pero por ejemplo, con una propiedad computada y el método reduce() podrías sumar lo que necesitas y obtener el resultado en la propiedad computada. el 8 mar. 2021 a las 19:38
  • los valors de precio que estan dentro de array que se llama details.. ya reviso las propiedad el 8 mar. 2021 a las 19:48
  • Ah, para imprimirlo en el template, mientras hacer el loop, con un método vue en vez de una propiedad computada ya te alcanza. el 8 mar. 2021 a las 20:13

1 respuesta 1

0

Con el método reduce() de js podrías sumar lo que necesitas.

Puedes crearte un método vue para que te retorne el resultado, y llamarlo cuando haces el loop en el template, pasándole como argumento el array de objetos a sumar.

new Vue({
  el: '#example',
  data: {
    tshit: [
        {
            "id":1,
            "selectRequi":[
                
            ]
        },
        {
            "id":2,
            "cotizaciones":[
                {
                    "Bodega":"xxxx",
                    "details":[
                    {
                        "Precio":"15.23",
                    },
                    {
                        "Precio":"50.33",
                    }
                    ]
                },
                {
                    "Bodega":"yyyy",
                    "details":[
                    {
                        "Precio":"15.23",
                    },
                    {
                        "Precio":"50.33",
                    }
                    ]
                }
            ]
        }
        ]
  },
  methods: {
    sumPrecios(items) {
      return items.reduce((a, b) => {
        return a + Number(b['Precio']);
    }, 0);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example">
  <div v-for="(item, i) in tshit[1].cotizaciones" :key="i">
    Bodega: {{item.Bodega}}
    <p v-for="(child, index) in item.details" :key="index">
      Precio: {{ child.Precio }}
    </p>
    <p><strong>
      Suma: {{ sumPrecios(item.details) }}
    </strong></p>
    <hr>
  </div>
</div>

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.