0

Tengo este componente que muestra el resumen de una venta pero ahora tengo que hacer que el componente sea genérico o sea este componente debe recibir un array de objetos.

mi componente actual:

<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>

<style lang="scss">

</style>

Tiene que recibir un array para que no sea solo para ventas sino este tipo de componente pero general para poder utilizar en otras pantallas.

Entonces:

Como convertir correctamente mi componente en uno generico que tome datos que reciba de un array?

3
  • Y cual seria el problema que tenes en hacerlo generico?
    – gbianchi
    Commented el 9 abr. 2019 a las 16:01
  • Si, como convertir correctamente mi componente en uno generico que tome datos que reciba de un array. @gbianchi gracias por tu comentario! Commented el 9 abr. 2019 a las 16:09
  • Podrias poner un ejemplo de lo que esperas recibir y como querrias renderizarlo? Porque no entiendo donde particularmente tenes el problema
    – gbianchi
    Commented el 9 abr. 2019 a las 16:13

2 respuestas 2

1

Para recibir un array como propiedad del componente, se hace de la siguiente manera:
HTML

<w-purchase-summary-table :myNewArray = "[
        {name: 'Person Name', isSortable: true}, 
        {name: 'Country', isSortable: true}]"
    ></w-purchase-summary-table>

VUEJS

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

Lo solucioné utilizando v-for de la siguiente manera:

<template>
  <styleGuideSection-view title="Tabla de resumen de venta">
    <b-container fluid>
      <b-row>
        <b-col>
          <w-purchase-summary-table 
          v-for="item in items" 
          :key="item.message">
          {{ items.message}} 
          </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;v-for="item in items" 
                &nbsp;:key="item.message">
                &lt;/w-purchase-summary-table&gt;
            </pre>
          </code>
        </b-col>
      </b-row>
    </b-container>
  </styleGuideSection-view>
</template>

export default {
  name: 'table-guide',
  components: {
    'styleGuideSection-view': styleGuideSection,
    'w-purchase-summary-table': purchaseSummaryTable
  },
  data () {
    return {
       items: [
        {message: 'subtotal' , value: '100'},
        ]
    }
  },
}

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.