0

Всем привет! Имеется проблема, не могу получить значение атрибута во 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>

1
  • Непонятна проблема. Нужно получать - получай (свойство присутствует, пример вывода свойств уже есть). В чем вoпрос заключается?
    – yar85
    31 июл 2021 в 22:31

1 ответ 1

1
v-on:click="addItem(index)"

или

v-on:click="addItem(product.id)"

На функии принимай индекс и делай с ним всякую магию

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.