0

Tengo una tabla en vue que permite mostrar la siguiente información de una venta o carrito abandonado:

<div class="row col-lg-6 d-flex justify-content-center">
                  <table class="table col-sm-4">
                    <thead>
                        <tr>
                          <th>Subtotal</th>
                          <td class="table-light">{{ subtotal | currency }}</td>
                        </tr>
                        <tr>
                          <th>Descuento</th>
                          <td class="table-light">{{ discount | currency }}</td>
                        </tr>
                        <tr>
                          <th>Envío</th>
                          <td class="table-light">{{ shipping | currency }}</td>
                        </tr>
                        <tr>
                          <th>Impuesto</th>
                          <td class="table-light">{{ taxes | currency }}</td>
                        </tr>
                        <tr>
                          <th>TOTAL</th>
                          <th class="total">{{ total | currency }}</th>
                        </tr>
                    </thead>
                  </table>
                </div>

introducir la descripción de la imagen aquí

El componente debe recibir los siguientes parametros subtotal shipping taxes discount total

y tengo que contemplar que el envío no siempre estará presente, y cuando esto ocurra no mostrar la información de envio.

Deberia recibir esos parametros poniendolos directo como props y solo mostrarlos en el template? Como realizarlo correctamente?

1 respuesta 1

0

Lo solucioné de la siguiente manera:

<template>
  <styleGuideSection-view title="Tabla de resumen de venta">
    <b-container fluid>
      <b-row>
        <b-col>
          <w-purchase-summary-table 
            subtotal="100"
            discount="20"
            shipping="20"
            taxes="21"
            total="101">
          </w-purchase-summary-table>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <p class="bigger bold">Implementación</p>
          <code>
            <pre>
              &lt;w-purchase-summary-table 
                &nbsp;subtotal="100" 
                &nbsp;discount="20" 
                &nbsp;taxes="21" 
                &nbsp;total="101"&gt;
              &lt;/w-purchase-summary-table&gt;
            </pre>
          </code>
        </b-col>
      </b-row>
    </b-container>
  </styleGuideSection-view>
</template>

  <script>
import styleGuideSection from '@/components/styleguide/StyleGuideSection'
import purchaseSummaryTable from '@/components/layout/templates/purchaseSummaryTable/PurchaseSummaryTable'
 export default {
  name: 'table-guide',
  components: {
    'styleGuideSection-view': styleGuideSection,
    'w-purchase-summary-table': purchaseSummaryTable
  },

y en la implementacion tambien con :

<template>
  <div class="container-fluid d-flex justify-content-center">
  <div class="row col-lg-6 d-flex justify-content-center">
    <table class="table col-sm-4">
      <thead>
        <tr>
          <th>Subtotal</th>
          <td class="table-light">{{ subtotal | currency }}</td>
        </tr>
        <tr>
          <th>Descuento</th>
          <td class="table-light">{{ discount | currency }}</td>
        </tr>
        <tr>
          <th>Envío</th>
          <td class="table-light">{{ shipping | currency }}</td>
        </tr>
        <tr>
          <th>Impuesto</th>
          <td class="table-light">{{ taxes | currency }}</td>
        </tr>
        <tr>
          <th>TOTAL</th>
          <th class="total">{{ total | currency }}</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
</template>

 <script>
export default {
  name: 'w-purchase-summary-table',
  props: {
    subtotal: Number,
    discount: Number,
    shipping: Number,
    taxes: Number,
    total: Number
  }
}
</script>

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.