Всем привет! Имеется проблема, не могу получить значение атрибута во VUE.js. Есть цикл, который создает блоки, допустим их будет 5. По нажатию на каждый, мне нужно получать уникальный номер (0, 1, 2, 3, 4), чтобы в дальнейшем работать с этим значением.
Мой код (массив объектов products):
let app = new Vue({
el: '#app',
data: {
balance: 1800,
items: ['a', 'b', 'c', 'd', 'e'],
productsPrice: [0],
products: [
{
name: 'Bánh Mì',
price: '200',
img: 1,
id: 0
},
{
name: 'Nước Suối',
price: '100',
img: 2,
id: 1
},
{
name: 'Sim Điện Thoại',
price: '1000',
img: 3,
id: 2
},
{
name: 'Can Xăng',
price: '1500',
img: 1,
id: 3
},
{
name: 'Bộ Sửa Xe',
price: '500',
img: 2,
id: 4
},
{
name: 'Bộ Đàm',
price: '3000',
img: 3,
id: 5
},
],
bucket: [
{
position: 0,
name: 'Banh Mi',
price: 400
},
{
position: 1,
name: 'Banh Mi',
price: 400
},
],
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div
v-for='(product, index) in products'
class="product">
<div class="content-for-product">
<div>
<span class="name-product">
{{product.name}}
</span>
</div>
<img :src="`./assets/img/products/${product.img}.png`">
<div>
<span class="name-product">
{{product.price}} RD
</span>
</div>
</div>
<div
class="btn-add-bucket"
v-bind:id="product.id"
ref="textName"
v-on:click="addItem"
:key="index"
:id="index">
</div>
</div>