Получить индекс объекта, по которому кликнули

Question

Здравствуйте. Есть задача http://prntscr.com/ghpvpq При клике на количество должно показываться окошко с редактированием количества. Не могу разобраться в том, как в окошко мне вставить нужные данные. Если, например, я кликнул на элемент объекта с индексом 1, как мне в окне отобразить нужные данные именно этого объекта?

Объект строится подобным образом:

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
                }
            ],

ох, тут логику надо прорабатывать. по сути нужно брать this этого элемента на который вы кликнули и подставлять его count — Sergey Novikov, Sep 06 '17 at 10:04
Да логика то в целом понятно.. Вот со стороны реализации не дойду никак( — Александр Белькевич, Sep 06 '17 at 10:38
я не силен пока в JS и у меня был такой же вопрос мне ответили просто вот ссылка может пригодится, https://ru.stackoverflow.com/questions/706956/Как-получить-индекс-элемента-массива я выбрал второй вариант ответа @Grundy — Air, Sep 06 '17 at 22:40

score 0 · Answer 1 · answered Sep 06 '17 at 14:55

А в чем проблема собственно, у вас должна быть конструкция отображающая список продуктов, по клику на продукте нужно показывать ваш виджет и передать в него данные:

<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
  }
}

score 0 · Accepted Answer · answered Sep 06 '17 at 19:15

Если тебе нужен именно индек объекта, а не сам объект, тогда ты в шаблоне делаешь следующее:

methods: {
  handleClick(index) {
    this.currentProduct = this.products[index];
  }
}

<template>
  <product 
    v-for="(product, index) in products"  
    @click="handleClick(index)"
  />
</template>

Получить индекс объекта, по которому кликнули

2 Answers2