Hello. There is a task http://prntscr.com/ghpvpq When you click on a quantity, a window should be displayed with editing the quantity. I can not figure out how to insert the necessary data into the window. If, for example, I clicked on an element of an object with index 1, how can I display the necessary data of this particular object in the window?

The object is constructed in a similar way:

listProducts: [ { name: 'Нож складной WENGER Evolution ,"Автобус" ,13 функций, 85 мм.WENGER', checkbox: true, image: require('./assets/product1.png'), price: 400, count: 3, sum: 0 }, { name: 'Рюкзак WENGER «NEO»', checkbox: false, image: require('./assets/product2.png'), price: 200, count: 3, sum: 0 }, { name: 'Перьевая ручка Waterman Hemisphere Essential, перо: нержавеющая сталь. WATERMAN', checkbox: true, image: require('./assets/product3.png'), price: 600, count: 3, sum: 0 } ],
  • oh, here logic needs to be worked through. in essence, you need to take this item on which you clicked and substitute it count - Sergey Novikov
  • Yes, the logic is generally understandable .. From the implementation side I won’t get anywhere ( - Alexander Belkevich
  • I'm not strong yet in JS and I had the same question I was answered just that the link may come in handy, ru.stackoverflow.com/questions/706956/... I chose the second answer @Grundy - Air

2 answers 2

If you need exactly the index of the object, and not the object itself, then you do the following in the template:

 methods: { handleClick(index) { this.currentProduct = this.products[index]; } } 
 <template> <product v-for="(product, index) in products" @click="handleClick(index)" /> </template>

    And what is the problem in fact, you should have a construction displaying a list of products; by clicking on the product, you need to show your widget and pass data to it:

     <product-row v-for="product in products" @click="showWidget(product)"/> <counter v-if="showCounter" :product="product" @close="showCounter=false"/> methods: { showWidget(product) { this.currentProduct = product this.showCounter = true } }