Need to access data element in Vue.js

Question

Quick question. If I have data in an element in the form of an array as follow:

   data: {

     product: socks,

     variants: [
      {
    variantId: 2234,
    variantColor: 'Green',
    variantQuantity: 0,
  },
  {
    variantId: 2235,
    variantColor: 'Blue',
    variantQuantity: 10,
  }

}

how can I select a certain variantQuantity based on me hovering over a certain div?

Full code:

HTML:

<div class="product-image">
  <img :src="image" />
</div>

<div class="product-info">
  <h1>{{ product }}</h1>
  <p v-if="inStock">In Stock</p>
  <p v-else :class="{ outOfStock: !inStock }">Out of Stock</p>

  <ul>
    <li v-for="detail in details">{{ detail }}</li>
  </ul>


    <div class="color-box"
         v-for="variant in variants" 
         :key="variant.variantId"
         :style="{ backgroundColor: variant.variantColor }"
         @mouseover="updateProduct(variant.variantImage)"
         >
    </div> 

    <button v-on:click="addToCart" 
      :disabled="!inStock"
      :class="{ disabledButton: !inStock }"
      >
    Add to cart
    </button>

  <div class="cart">
    <p>Cart({{ cart }})</p>
  </div>

</div>

Javascript:

var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: 'https://dl.dropboxusercontent.com/s/9zccs3f0pimj0wj/vmSocks-green-onWhite.jpg?dl=0',
inStock: false,
details: ['80% cotton', '20% polyester', 'Gender-neutral'],
variants: [
  {
    variantId: 2234,
    variantColor: 'green',
    variantImage: 'https://dl.dropboxusercontent.com/s/9zccs3f0pimj0wj/vmSocks-green-onWhite.jpg?dl=0',
variantQuantity: 0
  },
  {
    variantId: 2235,
    variantColor: 'blue',
    variantImage: 'https://dl.dropboxusercontent.com/s/t32hpz32y7snfna/vmSocks-blue-onWhite.jpg?dl=0',
variantQuantity: 10
  }
],
cart: 0
},
methods: {
addToCart() {
  this.cart += 1
},
updateProduct(variantImage) {
  this.image = variantImage
}
}
})

what do you mean by ...based on me hovering over a certain div? — Boussadjra Brahim
– Boussadjra Brahim, Commented Oct 6, 2018 at 19:44
Right now it's set up so that when I hover over the <div> with the class "colorbox" it changes its image based on which box I hover over. I'd like to make it so that it also displays variantQuantity as well. This is what it looks like in action: codepen.io/VueMastery/pen/ZxWybq?editors=1011 — mto213
– mto213, Commented Oct 6, 2018 at 19:50

tony19 · Accepted Answer · 2018-10-07 00:20:10Z

1

You could include variant.variantQuantity in the mouseover event-handler expression:

<div v-for="variant in variants" 
     @mouseover="updateProduct(variant.variantImage, variant.variantQuantity)"
     >

Also add a data property for quantity, and update the handler to accommodate the new property:

data() {
  return {
    quantity: 0,
    // ...
  };
},
methods: {
  updateProduct(variantImage, variantQuantity) {
    this.image = variantImage;
    this.quantity = variantQuantity;
  },
  // ...
}

demo based on your codepen

answered Oct 7, 2018 at 0:20

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

Need to access data element in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related