Как выбрать элемент в массиве если используешь v-for?

Question

У меня есть карточки (div class="card" v-for="dish in dishes"), мне нужно сделать метод, чтобы при нажатии кнопки "в корзину", в массив orders:[] будет добавляться id, title, image, price из массива dishes (прикрепил снизу массив) именно той карточки на которой я нажал "В корзину". Как мне выбрать это? Я понимаю что проще сделать под каждую карточку отдельно, но у меня много карточек я не все скинул. я пытался сделать как прикрепил, но не получается!

Метод:

addOrderMain() {
        this.orders.push({
            image: this.dish.image,
            id: this.dish.id,
            price: this.dish.price
        })
    }

Массив:

dishes: [ {
        "id": '1',
        "title": "Жаренная курица с фри",
        "image": 'https://mykaleidoscope.ru/x/uploads/posts/2022-09/1663793142_25-mykaleidoscope-ru-p-samaya-appetitnaya-yeda-yeda-instagram-27.jpg',
        "price": 1190
    },
    {
        "id": '2',
        "title": "Жаренная форель",
        "image": 'https://i.artfile.ru/2560x1708_1658696_[www.ArtFile.ru].jpg',
        "price": 790
    },
    {
        "id": '2',
        "title": "Жаренная форель",
        "image": 'https://i.artfile.ru/2560x1708_1658696_[www.ArtFile.ru].jpg',
        "price": 790
    }]

Answer 1

У вас уже есть dish, используйте его в качестве параметра:

<div class="card" v-for="dish in dishes">
   ...
   <button type="button" v-on:click="addOrderMain(dish)">В корзину</button>
</div>

addOrderMain(dish) {
        this.orders.push({
            image: dish.image,
            id: dish.id,
            price: dish.price
        })
    }

БЛОГ НА HUSL

Как выбрать элемент в массиве если используешь v-for?

Ответы (1 шт):