Reto con componentes

27/37

Lectura

Ahora que sabes cómo podemos crear Componentes en nuestra aplicación, tu reto será crear un componente personalizado que mantenga los badges de cada producto.

De tal manera que dentro de mi Producto solo tenga que usarlo como:

<badge :product="product">

Y este me retorne la lista de badges que un producto pueda tener.

Es decir, si mi producto tiene los badges:

{
    new: true,
    offer: false
}

Dentro de mi producto debería poder ver el badge:

<span class="badge new">Nuevo</span>

Si mi producto tiene los badges:

{
    new: true,
    offer: true
}

Dentro de mi producto debería poder ver los badges:

<span class="badge new">Nuevo</span>
<span class="badge offer">Nuevo</span>

Con este reto podremos aprender mejor cómo registrar nuevos componentes en nuestra aplicación y usarlos dentro de otros componentes y de esta manera ir generando una estructura más organizada en nuestro código.

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Listo:
.
Product.js

...
<h4>{{ product.name.toUpperCase() }} {{ product.stock == 0 ? "😭" : "😎" }}</h4>

<badge :product="product"></badge>

<p class="description__status" v-if="product.stock == 3">Quedan pocas unidades</p>
...

index.html

...
    <script src="./Badge.js"></script>
    <script src="./Product.js"></script>

    <script>
        app.mount("#app");
    </script>
    
</body>
</html>

Badge.js

app.component("badge", {

    template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,

    props: ["product"]

});

El código es el mismo para Options y Composition, dejo el repositorio completo:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/fcc9c3e03c7e44b2e5e7a49d2f6e03bfd3856006

Listo xD

# Badge.js
app.component("badge", {
  template: `
<span class="badge new" v-if="product.new">Nuevo</span>
<span class="badge offer" v-if="product.offer">Oferta</span>
`,
  props: ['product']
});

# Product.js
<badge :product="product"></badge>

# index.html
  <script src="./Badge.js"></script>


No es mucho, pero es trabajo honesto.
Lo que hice fu lo siguiente:

Agregue un nuevo array de badges a los productos

badges: [
	{	
        	title: 'Nuevo',
                name: 'new',
                status: true,
         },
        {
                title: 'Oferta',
                name: 'offer',
		status: true,
	},
]
                                	   

lo recorro de la siguiente forma:

<badge v-for="badge in product.badges" :badge="badge" />

Badges.js

app.component("badge", {
    template: /* vue-html */`
        <span class="badge" :class="badge.name"  v-if="badge.status">{{ badge.title }}</span>
    `,
    props: ["badge"]
});

Dejo mi aporte de como lo hice. Tengo una estructura un poco diferente porque estoy usando Typescript y y archivos .vue.

<template>
  <span class="badge new" v-if="product.new">Nuevo</span>
  <span class="badge offer" v-if="product.offer">Oferta</span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:"BadgesComponent",
    props:{ product : {}}
})
</script>

Budge.js

app.component("budge", {
    template: /* vue-html */`
    <span class="badge new" v-if="budge.new">Nuevo</span>
    <span class="badge offer" v-if="budge.offert">Oferta</span>
    `,
    props: ["budge"],
});

Product.js

<budge :budge="product"></budge>

index.html

<script src="./Budge.js"></script>

Hola, aquí como lo logré:

index.html

<script src="Badge.js"></script>

product.js

<Badge :product="product"></Badge>

Badge.js

app.component("Badge", {
  template: /* vue-html */`
    <span class="badge new" v-if="product.new" >Nuevo</span>
    <span class="badge offer" v-if="product.offer" >Oferta</span>
  `,
  props: [
    "product"
  ]
});

no me gusto el hecho de estar repitiendo el span una y otra vez, pero bueno, recien estoy aprendiendo vue y funciono xd

En Product.js:

<badges :product="product"></badges>
      <!-- <span class="badge new" v-if="product.new">Nuevo</span>
      <span class="badge offer" v-if="product.offer">Oferta</span> -->

En Badges.js:

app.component("badges", {
  template: `
    <span class="badge new" v-if="product.new">Nuevo</span>
    <span class="badge offer" v-if="product.offer">Oferta</span>
  `,
  props: ["product"]
})

Y en el index.html agregue, antes del script del Product.js :

  <script src="./Badges.js"></script>
  <script src="./Product.js"></script>

Mi solución:
//Product.js

            <section class="description">
            <h4>{{product.name.toUpperCase()}} {{ product.stock === 0 ? "😌" : "🥰" }}</h4>
            <badges :product="product"/>
            (...)

//Badjes.js

app.component("badges", {
    template: /* vue-html */`
        <span class="badge" 
        :class="{new: product.new}">{{product.new ? "Nuevo" : ""}}</span>
        <span class="badge" 
        :class="{offer: product.offer}">{{product.offer ? "Oferta" : ""}}</span>
    `,
    props: ["product"],

})

Listo el reto 😎🚀

Badge.js 👌

app.component("badge", {
  template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,
  props: {
    product: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
});

Product.js 🦾

<badge :product="product"></badge>

Pues la verdad no me funciona ni copiando el código directamente.

Realizado.

Index.html

Agrupo los valores

badge: { new: true, offer: true },

e inserto

<script src="./bagde.js"></script>

Product.js

<badge :badge="product.badge"></badge>

Badge.js

app.component("badge", {
  template: /*vue-html */ `
    <section>
        <span class="badge new" v-if="badge.new">Nuevo</span>
        <span class="badge offer" v-if="badge.offer">Oferta</span>
    </section>
  `,
  props: ["badge"],
});

izy