-1

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!

1 Resposta 1

0

Como você está utilizando o vuex, você pode mandar um commit avisando que o produto foi alterado(adicionado ou removido) para o seu state no vuex, assim podendo escutar a alteração no componente que você deseja, no caso o carrinho que está no header. Da uma nesse post, acho que vai sanar sua necessidade https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj

Espero ter entendido a sua dúvida e ajudado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .