CODEWITHSUNDEEP
javascriptvue.js
alkadelik
alkadelik

Reputation: 573

Retrieve value from objects in dynamically created array in Vuejs

I am building a shopping app with vue and django, and fetch the inventory products in my .js file via api using axios.

My .js file where I fetch data from the db:

  delimiters: ['[[', ']]'],
  data: {
    inventory: [],
    merchants: [],
    cart: [],
  },
  ...,
  mounted: function  (){
    axios
      .get("http://127.0.0.1:8000/get_products/").then(response => {
        (this.inventory = response.data)
        return axios.get("http://127.0.0.1:8000/get_merchants/")
      })
      .then(response => {
        (this.merchants = response.data)
      })
  },

I am able to successfully display the results in my template with the following html:

<div class="main_block">
  <div class="products" v-for="product in inventory">
    <div class="mini_block info_block">
      <div class="left merch_img_holder"></div>
      <h1 class="left info">[[ product.fields.merchant ]]</h1>
      <div class="clear"></div>
    </div>
    <div class="product_image">
      <img v-bind:src="/media/+[[ product.fields.image ]]" width="420" alt="Image">
    </div>
    <div class="mini_block info_block">
      <div class="left info">
        <div class="">[[ product.fields.name ]]</div>
        <div class="">[[ product.fields.price ]]</div>
      </div>
      <div class="right info">
        <i class="fas fa-caret-square-down" @click="deleteFromCart([[ product ]])"></i>
        <i class="fas fa-caret-square-up" @click="addToCart([[ product ]])"></i>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>

I am trying to add items to my cart using <i class="fas fa-caret-square-up" @click="addToCart()"></i> (near the bottom of my html). My addToCart() function looks like this:

addToCart(product){
  this.cart.push(product)
},

This actually updates the cart - I know this because I have a computed property that returns this.cart.length whenever I click add to cart.

I need to display the items in cart (in my cart view). I'm trying to do this with the following html:

<div v-for="(item, index) in cart" class="cart_item">
  <div class="cart_img_holder">
    <img v-bind:src="/media/+[[ item.image ]]" width="80" alt="Image">
  </div>
  <ul class="cart_item_detail">
    <h3>[[ item.name ]]</h3>
    <li>[[ item.price ]]</li>
    <li>[[ item.merchant ]]</li>
    <li>Qty: [[ item.qty ]] | <a @click="removeFromCart(index)">Delete</a></li>
  </ul>
</div>

The problem is that it's either adding empty objects to the cart, or I am not able to retrieve those items. Logging the cart items to the console yields undefined. How can I display the objects in the cart?

Upvotes: 0

Views: 315

Answers (3)

alkadelik
alkadelik

Reputation: 573

I was passing product the wrong way i.e. @click="addToCart([[ product ]])" instead of @click="addToCart(product)"

Upvotes: 1

Muhammad Hassan Khan
Muhammad Hassan Khan

Reputation: 149

You are not passing any value in addToCart method. That’s why always undefined gets pushed into carts array.

Upvotes: 1

webprogrammer
webprogrammer

Reputation: 2477

You have such code:

v-bind:src="/media/+[[ item.image ]]"

I am not sure if delimiters '[[' works and is a good idea. I met this another delimiter representation earlier like this '${' which looks better. But still, replace such code (and similar part) with next:

v-bind:src="'/media/' + item.image"

Upvotes: 0

Related Questions