-1
Hello, I’m doing an e-commerce system in Vue, but I’m having a hard time passing the object of my JSON, which is in the Home.Ve component to the cart icon that is in another component, in Header.vue. I passed the props with the product variable (name of my object json) in the Home Component.vue. The browser console shows no error, but the numerical representation that had to appear on the icon I entered is not showing.
Component code:
//Home.
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="2000"
controls
indicators
background-color="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
:img-src="carouselUm"
alt="slide 1"
title="slide 1"
></b-carousel-slide>
<b-carousel-slide
img-src="https://picsum.photos/1024/480/?image=55"
alt="slide 2"
title="slide 2"
>
<h1>Uma frase qualquer</h1>
</b-carousel-slide>
<b-carousel-slide
:img-src="carouselUm"
alt="slide 3"
title="slide 3"
></b-carousel-slide>
<b-carousel-slide>
<template v-slot:img>
<img
class="d-block img-fluid w-100"
src="https://picsum.photos/1024/480/?image=55"
alt="slide 4"
title="slide 4"
/>
</template>
</b-carousel-slide>
<b-carousel-slide
caption="Blank Image"
img-blank
img-alt="slide 5"
img-title="slide 5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut
pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
<b-col class="col-12 banner">
<b-img :src="banner" alt="banner" title="banner"></b-img>
</b-col>
<b-row v-if="exibeProduto" class="cards-home">
<h1>Produtos</h1>
</b-row>
<b-row class="container-fluid cards">
<b-card
v-for="produto in listaProdutos"
:key="produto.id"
:id="produto.id"
:title="produto.titulo"
:img-src="produto.imagem"
img-top
class="mb-2 container card-produto"
:class="{ 'card-produto-promocao': produto.promocao === 'Sim' }"
>
<b-card-text class="preco-card" alt="preço" title="preço">
<!-- Preço: {{ // produto.valor | formatarPreco("R$") }}-->
<!-- Preço: R${{ produto.valor }}/Kg-->
Preço: {{ produto.valor }}
</b-card-text>
<b-row class="botoes">
<b-button
href="#"
class="btn-detalhe"
alt="saiba mais"
title="saiba mais"
>
<router-link
:to="{ name: 'detalheProduto', params: { id: produto.id } }"
>
Saiba mais
</router-link>
</b-button>
<b-button
href="#"
class="btn-comprar"
alt="comprar"
title="comprar"
@click="adicionarAoCarrinho(produto)"
>
Comprar</b-button
>
</b-row>
</b-card>
</b-row>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "Home",
props: {
produtos: Number
},
data() {
return {
carrinho: [],
exibeProduto: true,
banner: require("../assets/banner-plastico.jpg"),
carouselUm: require("../assets/sale.jpg"),
slide: 0,
sliding: null
};
},
methods: {
onSlideStart() {
this.sliding = true;
},
onSlideEnd() {
this.sliding = false;
},
adicionarAoCarrinho: function(produto) {
this.carrinho.push(produto.id);
},
// mostrarCarrinho() {
// this.$router.push({ name: "cart" });
// },
quantidadeNoCarrinhoPorProduto: function(produto) {
return this.carrinho.filter(elem => elem === produto.id).length;
},
...mapActions(["getProdutos"])
},
computed: {
...mapGetters(["listaProdutos"]),
quantidadeNoCarrinho: function() {
return this.carrinho.length;
}
},
created() {
this.getProdutos();
}
};
</script>
//Header.
<template>
<div>
<b-navbar toggleable="lg" class="navbar">
<b-navbar-brand href="#" class="brand-nav" alt="verplas" title="vertplas"
>VertPlas<b-img
class="img-brand"
:src="imageBrand"
alt="verplas"
title="vertplas"
></b-img>
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse class="my-sm-auto" id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto nav">
<b-nav-form>
<b-form-input
size="sm"
class="mr-sm-2 input-nav"
placeholder="Search"
alt="search"
title="search"
></b-form-input>
<b-icon
size="sm"
icon="search"
class="my-2 my-sm-0 input-icon-nav"
alt="search"
title="search"
type="submit"
>Search
</b-icon>
<b-navbar-nav class="nav-items row">
<b-nav-item class="item1" href="#" alt="home" title="home">
<router-link :to="{ name: 'home' }">
Home</router-link
></b-nav-item
>
<b-nav-item class="item1" href="#" alt="sobre" title="sobre">
<router-link :to="{ name: 'sobre' }">
Sobre</router-link
></b-nav-item
>
<b-nav-item
class="item1"
href="#"
alt="promoções"
title="promoções"
>
<router-link :to="{ name: 'promocoes' }">
Promoções</router-link
></b-nav-item
>
<b-nav-item
class="item1"
href="#"
alt="produtos"
title="produtos"
>
<router-link :to="{ name: 'produtos' }"
>Produtos
</router-link></b-nav-item
>
<b-nav-item class="item1" href="#" alt="contato" title="contato"
><router-link :to="{ name: 'contato' }">
Contato
</router-link></b-nav-item
>
</b-navbar-nav>
</b-nav-form>
<b-nav-item class="row row-cols-sm-6 icons-nav">
<router-link :to="{ name: 'cart' }" class="row row-cols-sm-12">
<b-img
:src="imageCart"
size="sm"
class="imagem-carrinho"
alt="carrinho"
title="carrinho"
@click="mostrarCarrinho"
></b-img>
<b-badge class="badge" v-if="quantidadeNoCarrinho > 0">
{{ quantidadeNoCarrinho }}</b-badge
></router-link
>
<router-link :to="{ name: 'login' }" class="row row-cols-sm-12">
<b-img
:src="imageLogin"
size="sm"
class="imagem-login "
alt="login"
title="login"
></b-img
></router-link>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
carrinho: [],
imageCart: require("../assets/icons/iconCart.svg"),
imageLogin: require("../assets/icons/login.svg"),
imageBrand: require("../assets/vp_preto.svg")
};
},
methods: {
adicionarAoCarrinho: function(produto) {
this.carrinho.push(produto.id);
},
mostrarCarrinho() {
this.$router.push({ name: "cart" });
},
quantidadeNoCarrinhoPorProduto: function(produto) {
return this.carrinho.filter(elem => elem === produto.id).length;
}
},
computed: {
quantidadeNoCarrinho: function() {
return this.carrinho.length;
}
}
};
</script>
I’d really appreciate it if someone could help me out!