Retrieve value from objects in dynamically created array in Vuejs

vue set array of objects
vue watch
vue.set example
vue watch object
vue set nested object
vue dynamic component
vue js
vue dynamic props

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?

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

Get value from dynamic list, Hi guys, Im trying to get the value from an input field in a list that is dynamically generated in a v-for loop. But you can bind each input to a Item object. Whats your opinion on working with vue.js in general? Since list is an array, and colorGroup.colors is also another array inside, you will need to make� Vue.js Array Push Example - You can use .push method to add an element in array or object. Here in this tutorial, we are going to explain how you can add an element in array or object. You can also use our online editor to edit and run the code online

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

How to dynamically create reactive properties in Vue, How to dynamically create reactive properties in Vue When an object is passed as the data option to a Vue instance, Vue walks through every Vue.set(vm.fruits , 0, 'kiwi'); // remplaces the first element in the array with kiwi To read more on reactivity in Vue you can checkout the reactivity in-depth doc. So, I'm generating a table containing a checkbox and a textfield from an array of items, like a "questionnaire" where the questions come from a database. Now, how do I, in good vue manner, retriev

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"

How to Dynamically render a list/array of different components in , Sep 28, 2017 � 1 min read The template will dynamically render the component (from the array) in the reserved <component> element and bind to the :is attribute . The code iterates through the section1Tabs array of objects from the vue.js data in the <script> and renders the current tab.component from the section1Tabs � Don’t use non-primitive values like objects and arrays as v-for keys. Use string or numeric values instead. For detailed usage of the key attribute, please see the key API documentation. Array Change Detection Mutation Methods. Vue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are

Reactivity in Depth — Vue.js, When you pass a plain JavaScript object to a Vue instance as its data option, Vue Vue does not allow dynamically adding new root-level reactive properties to an already created instance. to a nested object using the Vue.set(object, propertyName, value) method: Vue cannot detect the following changes to an array:. In some cases, you might need to replace the Array with completely new objects - e.g. ones returned from an API call. Since by default v-repeat determines the reusability of an existing child instance and its DOM nodes by tracking the identity of its data object, this could cause the entire list to be re-rendered.

V-model with dynamically created inputs (with v-for) - Get Help, Hello, So to make it short, what I'm trying to do is to create several inputs depending on the number of element I have in an array (these element serves as lebels� const { name: heroName } = hero is an object destructuring. The destucturing defines a new variable heroName (instead of name as in previous example), and assigns to heroName the value hero.name. 3.2 Dynamic property name. What makes the object destructuring even more useful is that you could extract to variables properties with the dynamic value:

VUE v-model, two-way data binding and editing in multi nested , props: { value: Object }, computed: { value: { get () { return this.value }, set (val) { this.$emit('input', val) } } } The component is dynamically created using the vue component tag. Since it is an Array , we can use push. Create a� The ArrayList class is part of the System.Collections namespace within .NET. By creating a new object of this type you can then store objects within an ArrayList. Below you can see that you need to explicitly create an ArrayList object using the New-Object cmdlet or by casting a standard array to an ArrayList object.

Comments
  • Do you really need to use '[[' as delimeter? Such delimiter is confusing. I saw this '${' delimiter.
  • @webprogrammer I'm using django which also uses the curly braces {{ }} so I use [[ ]] so they don't conflict.
  • ok, then its fine. It's new information for me. Thank you!
  • could you create a demo for this? sandbox/codepen or something.
  • I'm passing "products" into it (sorry I just edited it to reflect that)
  • 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]
  • Have you checked what’s in product when you call addToCart method?
  • It's a similar response: I get ["product", __ob__: Observer] - I'm getting the same thing I pass into addToCart
  • @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.