时间戳

首页 > 解决方案 > 如何将 onclick 事件附加到从 vuejs "v-for=" 生成的每个项目以显示或隐藏其内部元素

javascript - 如何将 onclick 事件附加到从 vuejs "v-for=" 生成的每个项目以显示或隐藏其内部元素

问题描述

我的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>

当我遍历每个数据并显示它们时，如何添加事件以隐藏和取消隐藏带有数字 id“数字微调器”类的 div 以及显示的每个元素上的按钮。

我已经写了这个，但即使我点击其他项目，它也只会影响第一个项目。

 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..请原谅我的马虎

标签： javascripthtmlloopsvue.jsvuejs2

解决方案

您正在使用 Vue ！不要专注于操作 DOM ！你没有使用 jQuery ！在编码之前阅读 Vue 文档！

推荐阅读