Как я могу прикрепить событие onclick к каждому элементу, сгенерированному из vuejs "v-for =", чтобы показать или скрыть его внутренний элемент

Question

Мои vue данные

data: function() { 
    return {
      results: { 
        "items": [
           {
            "id": "770c257b-7ded-437c-99b5-3b8953b5be3a",
            "name": "Gsbssbb",
            "price": 9559,
            "colour": {
                "name": "Blue",
                "hex": "FF0000AE"
            },
            "amountAvailable": 949
        },
        {
            "id": "8ecc6558-0c16-4497-b742-5eb5cb28c572",
            "name": "Vsbdbdb",
            "price": 6559,
            "colour": {
                "name": "Purple",
                "hex": "FF800080"
            },
            "amountAvailable": 6595
        }
    ],
}

Шаблон

<div class="column asoebi-list-item" v-for="result in results.items">
                  <div id="item-event" class="columns is-mobile">
                      <div class="column auto has-text-left">
                          <p class="item-name">{{result.name}}</p>
                          <p class="item-price" id="item-price">  {{result.price}}</p>
                          <p class="item-units">{{result.amountAvailable}} Units Remaining &#183; {{result.colour.name}}</p>
                      </div>
                       <div class="column is-2">

                                <button id="number-spinner-up" class="o-button button-bottom"  type="button" onclick="this.parentNode.querySelector('[type=number]').stepUp();">
                                    +
                                </button>
                                    <input id="count-input" type="number" name="number" min="0" max="900" v-model="count">
                        <button  id="number-spinner-down" class="o-button button-top" type="button" onclick="this.parentNode.querySelector('[type=number]').stepDown();">
                                    -
                        </button>
             </div>
          </div>
      </div>

Как и oop через все данные и отображать их, Как я могу добавить событие, чтобы скрыть и un-hide div с номером id класса «number-spinner» и кнопками на каждом отображаемом элементе.

Я уже написал это, но он влияет только на первый элемент, даже если я нажимаю на другие элементы.

 let allItems = document.querySelectorAll("#item-event");
        for (let i = 0; i <= allItems.length; i++) { 
            allItems[i].addEventListener("click", () => {
                this.toggleSpinner()
                  }); 
                }

    toggleSpinner: function() {
          let countInput = document.getElementById("count-input");
          countInput.style.visibility = "visible"
          let theElementStyle1 = getComputedStyle(document.getElementById("number-spinner-up"));
          let theElementStyle2 = getComputedStyle(document.getElementById("number-spinner-down"));
          if(theElementStyle1.visibility === "hidden") {
              document.getElementById("number-spinner-up").style.visibility = "visible";
          }
          else {
              if(countInput.value === "0") {
                countInput.style.visibility = "hidden"
          }
              document.getElementById("number-spinner-up").style.visibility = "hidden";
          }
          if(theElementStyle2.visibility === "hidden") {
              document.getElementById("number-spinner-down").style.visibility = "visible";
          }
          else {
            if(countInput.value === "0") {
                countInput.style.visibility = "hidden"
          }
              document.getElementById("number-spinner-down").style.visibility = "hidden";
          } 

      },

Я только начал с vue .. пожалуйста, прости мою неряшливость

Answer 1

Всегда лучше держать jQuery вдали от Vue, так как он имеет свои собственные функции для удовлетворения большинства требований.

Мне не ясно, какой div следует установить для переключения Посмотреть. Поэтому я добавил одну ссылку, чтобы переключить его. Надеюсь, это поможет.

        <div class="column asoebi-list-item" v-for="result in results.items">
            <div id="item-event" class="columns is-mobile">
                <div class="column auto has-text-left">
                    <p class="item-name">{{result.name}}</p>
                    <p class="item-price" id="item-price"> {{result.price}}</p>
                    <p class="item-units">{{result.amountAvailable}} Units Remaining &#183; {{result.colour.name}}</p>
                </div>
                <div class="column is-2" v-show="result.active">
                    <button id="number-spinner-up" class="o-button button-bottom" type="button"
                            onclick="this.parentNode.querySelector('[type=number]').stepUp();">
                        +
                    </button>
                    <input id="count-input" type="number" name="number" min="0" max="900" v-model="result.count">
                    <button id="number-spinner-down" class="o-button button-top" type="button"
                            onclick="this.parentNode.querySelector('[type=number]').stepDown();">
                        -
                    </button>
                </div>
                <a href="javascript:void(0)" @click="result.active=!result.active">toggle</a>
            </div>
        </div>

Также внесены некоторые изменения в массив results для обработки v-model и переключения функций

    data: () => {
        return {
            results: {
                "items": [
                    {
                        "id": "770c257b-7ded-437c-99b5-3b8953b5be3a",
                        "name": "Gsbssbb",
                        "price": 9559,
                        "colour": {
                            "name": "Blue",
                            "hex": "FF0000AE"
                        },
                        "amountAvailable": 949,
                        "count": null,
                        "active": true
                    },
                    {
                        "id": "8ecc6558-0c16-4497-b742-5eb5cb28c572",
                        "name": "Vsbdbdb",
                        "price": 6559,
                        "colour": {
                            "name": "Purple",
                            "hex": "FF800080"
                        },
                        "amountAvailable": 6595,
                        "count": null,
                        "active": true
                    }
                ],
            }
        }
    },

Answer 2

Вы используете Vue! Не зацикливайтесь на управлении DOM! Вы не используете jQuery! Прочитайте Vue DOCs перед кодированием!