Retrieve value from objects in dynamically created array in Vuejs

Question

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?

Do you really need to use '[[' as delimeter? Such delimiter is confusing. I saw this '${' delimiter. — webprogrammer
– webprogrammer, Commented Jan 20, 2020 at 17:00
@webprogrammer I'm using django which also uses the curly braces {{ }} so I use [[ ]] so they don't conflict. — alkadelik
– alkadelik, Commented Jan 20, 2020 at 17:04
could you create a demo for this? sandbox/codepen or something. — AVJT82
– AVJT82, Commented Jan 20, 2020 at 19:18

Muhammad Hassan Khan · Accepted Answer · 2020-01-20 17:06:36Z

1

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

answered Jan 20, 2020 at 17:06

Muhammad Hassan Khan

1495 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

alkadelik Over a year ago

I'm passing "products" into it (sorry I just edited it to reflect that)

alkadelik Over a year ago

Also, if I change @click="addToCart(product)" to @click="addToCart(product.fields.name)" and log it to console, I get ["product.fields.name", __ob__: Observer]

Muhammad Hassan Khan Over a year ago

Have you checked what’s in product when you call addToCart method?

alkadelik Over a year ago

It's a similar response: I get ["product", __ob__: Observer] - I'm getting the same thing I pass into addToCart

AVJT82 Over a year ago

@alkadelik, you shouldn't get such console logs based on the code we are seeing. As mentioned in comment to your question, please create a demo to play with.

|

alkadelik · Accepted Answer · 2020-01-22 16:17:11Z

1

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

answered Jan 22, 2020 at 16:17

alkadelik

6032 gold badges9 silver badges21 bronze badges

Comments

webprogrammer · Accepted Answer · 2020-01-20 17:02:16Z

0

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"

answered Jan 20, 2020 at 17:02

webprogrammer

2,4733 gold badges22 silver badges27 bronze badges

Collectives™ on Stack Overflow

Retrieve value from objects in dynamically created array in Vuejs

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related