I can’t pass the products I select in Home.Ve to Header in Vue

Asked

Viewed 43 times

-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!

1 answer

0

Since you are using vuex, you can send a commit warning that the product has been changed (added or removed) to its state in vuex, so you can listen to the change in the component you want, in this case the cart that is in the header. Give one in this post, I think will remedy your need https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj

I hope I’ve understood your doubt and helped!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.