我的vue數(shù)據(jù)是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>當(dāng)我循環(huán)遍歷每個(gè)數(shù)據(jù)并顯示它們時(shí)，如何添加事件來隱藏和取消隱藏帶有數(shù)字 id“number-spinner”類的 div 以及顯示的每個(gè)元素上的按鈕。我已經(jīng)寫好了，但即使我單擊其他項(xiàng)目，它也只會(huì)影響第一個(gè)項(xiàng)目。我剛剛開始使用vue..請(qǐng)?jiān)徫业鸟R虎
2 回答
瀟湘沐
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊
讓 jQuery 遠(yuǎn)離 Vue 總是更好，因?yàn)樗凶约旱墓δ軄硖幚泶蠖鄶?shù)需求。
我不清楚應(yīng)該設(shè)置哪個(gè) div 來切換視圖。所以我添加了一個(gè)鏈接來切換它。希望這會(huì)有所幫助。
<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>
此外，對(duì)數(shù)組進(jìn)行了一些更改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 關(guān)注
- 160 瀏覽
添加回答
舉報(bào)
0/150
提交
取消