鍍金池/ 問(wèn)答/HTML/ 關(guān)于列表選擇的問(wèn)題

關(guān)于列表選擇的問(wèn)題

1.
clipboard.png

2.圖中的收貨地址列表是動(dòng)態(tài)遍歷生成的，然后我需要通過(guò)選擇設(shè)為默認(rèn)地址來(lái)切換狀態(tài)，后臺(tái)是傳了一個(gè)狀態(tài)屬性給我去判斷，但是一判斷就所有的都加上了，因?yàn)槲疫@里用的是單選框按鈕，如下圖

3.
clipboard.png
后面我就想著用狀態(tài)值state去判斷checked屬性的有無(wú)，但是我如果要點(diǎn)擊切換的時(shí)候，就是只能選中一個(gè)的時(shí)候又會(huì)出問(wèn)題

4.
clipboard.png

回答
編輯回答
莓森

個(gè)人不太喜歡radio按鈕，自己實(shí)現(xiàn)上述效果也不難。
當(dāng)點(diǎn)擊“設(shè)為默認(rèn)”按鈕時(shí)，<li v-for="key,index in list" :class={selected:key.selIndex==1}>@click="select(index)",
把Index傳下去，此時(shí)會(huì)請(qǐng)求接口，如果接口請(qǐng)求成功，就遍歷list,把每一項(xiàng)的default都設(shè)置為2，循環(huán)下面把list[index]項(xiàng)設(shè)置為1，(selIndex為后端給的是否默認(rèn))以上..

2017年10月31日 19:18
編輯回答
淺淺

改為

:checked="item.state"
2017年7月14日 13:34
編輯回答
避風(fēng)港

這種效果的話其實(shí)可以不用radio,你可以讓UI給你那個(gè)選擇默認(rèn)地址的樣式（圓圈）

<div v-for="(item, index) in addressList">
    <div :class="{'normal-radio-button','active-radio-button':item.state===1}" @click="selectDefault(index)"></div> 
</div>


methods: {
    selectDefault(index) {
        ...請(qǐng)求接口，更新頁(yè)面
    }
}
2017年9月30日 20:24
編輯回答
苦妄

頁(yè)面效果 v-for 可以根據(jù)索引來(lái)做 點(diǎn)擊把索引賦值與一個(gè)變量 然后通過(guò)判斷 index==變量名來(lái) 改變選中效果
也就是單選

然后需要傳值告訴后端誰(shuí)是選中的 就可以根據(jù)索引值 數(shù)據(jù)[索引]下標(biāo)來(lái)獲取對(duì)應(yīng)元素

2017年2月11日 20:28