CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Shankar Ghimire
Shankar Ghimire

Reputation: 146

How to get data in real time in vuejs

It is my first project in vue. I am getting the cart-data from the server. i want to change quantity from the vue. When i click change quantity i.e up arrow and down arrow, change is reflected in the server database. but in UI i have to reload the page to see change which i do not want that.

i want to see the change in without reloading when button is click. and i want to run TotalCartPrice method without clicking any button. I mean when i open cart it should be automatically run. what is wrong?

cart.vue

<template>
    <CartItem v-for="cart in carts" :key="cart.id" :carts="cart" />
</template>
<script>
import CartItem from "../components/cart/cartItem";
export default {
  name: "CartPage",
  components: {
    CartItem
  },
  computed: {
    ...mapGetters(["carts"])
  },
  created() {},
  methods: {
    TotalCartPrice() {
      var total = 0;
      for (var i = 0; i < this.carts.length; i++) {
        total += this.carts[i].product.price * this.carts[i].quantity;
      }
      return total;
    }
  }
};

CartItem.vue

<template>
  <div>
     <h5>${{ carts.product.price }}</h5>
     <div class="product_count">
        <input
          disabled
          name="qty"
          maxlength="12"
          :value="carts.quantity"
          class="input-text qty"
        />
        <button
          @click="addProduct()"
          class="increase items-count"
          type="button"
        >
          <i class="lnr lnr-chevron-up"></i>
        </button>
        <button
          @click="removeProduct()"
          class="reduced items-count"
          type="button"
        >
          <i class="lnr lnr-chevron-down"></i>
        </button>
      </div>
</div>
</template>
<script>
export default {
  name: "cartItem",
  props: {
    carts: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      cartDetail: {
        product: this.carts.product.id,
        quantity: null,
        customer: null,
        checkout: false
      }
    };
  },
  computed: {
    ...mapGetters(["authUser"])
  },
  methods: {
    ...mapActions(["addTocart"]),
    addProduct() {
      this.cartDetail.quantity = 1;
      this.cartDetail.customer = this.authUser.id;
      this.addTocart(this.cartDetail);
    },
    removeProduct() {
      this.cartDetail.quantity = -1;
      this.cartDetail.customer = this.authUser.id;
      this.addTocart(this.cartDetail)
    }
  }
};
</script>

Cart.js

const state = {
  carts: []
};
const getters = {
  carts: state => state.carts
};
const actions = {
  async addTocart({ commit }, data) {
    const JsonData = JSON.parse(JSON.stringify(data));
    const response = await axios.post("/api/v1/cart/view-set/", JsonData);
    return response;
  },
  async cart({ commit }, data) {
    if (data !== "null") {
      const response = await axios.get(`/api/v1/cart/cartdetial/${data}`);
      commit("setCarts", response.data);
      return response;
    }
  }
};
const mutations = {
  setCarts: (state, carts) => {
    state.carts = carts;
  }
};

export default {
  state,
  getters,
  actions,
  mutations
};

Upvotes: 2

Views: 3805

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

TotalCartPrice should be a computed property:

    TotalCartPrice: function() {
      var total = 0;
      for (var i = 0; i < this.carts.length; i++) {
        total += this.carts[i].product.price * this.carts[i].quantity;
      }
      return total;
    }

From the docs on the difference between computed and methods:

...computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

This way, your cart price will update whenever this.carts is updated.

Upvotes: 1

Related Questions