如何将 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>当我循环遍历每个数据并显示它们时，如何添加事件来隐藏和取消隐藏带有数字 id“number-spinner”类的 div 以及显示的每个元素上的按钮。我已经写好了，但即使我单击其他项目，它也只会影响第一个项目。我刚刚开始使用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 文档！