Olá, eu estou fazendo um sistema e-commerce em Vue, porém estou com uma dificuldade de passar o objeto do meu JSON, que se encontra no componente Home.vue para o ícone do carrinho que se encontra em outro componente, no Header.vue. Passei o props com a variável produtos (nome do meu json de objetos) no Componente Home.vue. No console do navegador não apresenta nenhum erro, mas a representação numérica que tinha que aparecer no ícone que eu inseri não está sendo exibida.
Código dos componentes:
//Home.vue
<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.vue
<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>
Agradeço muito se alguém puder me dar essa ajuda!