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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?