我的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 · {{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..請原諒我的馬虎
2 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
讓 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 · {{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
}
],
}
}
},
- 2 回答
- 0 關注
- 151 瀏覽
添加回答
舉報
0/150
提交
取消