溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue.js刪除動態綁定的radio的指定項

發布時間:2020-09-24 01:35:09 來源:腳本之家 閱讀:215 作者:Coding_xiaoqiu 欄目:web開發

vue.js刪除動態綁定的radio的指定項

上圖效果,動態添加綁定radio選項,然后也可以動態刪除,右邊編輯器刪除,左邊的視圖也對應的刪除。

視圖代碼 view:

"<ul><li v-for='option in options'>" + 
 "<input type='radio' :name='groupName'>{{option.text}}" + 
"</li></ul>", 

數據綁定model.options:

options: [{ id: 1, text: '選項1', checked: false }, { id: 2, text: '選項2', checked: false }] 

動態添加:

vm.options.push({ id: "", text: "新選項", checked: false }); 

動態刪除指定radio,我們存儲的是json對象動態添加到options數組中去,取的時候在每個事件可以傳入$event對象,可以獲取到當前事件源,DOM對象,但是vm.options是個數組,沒法很好的匹配DOM來刪除指定的數組項。
在我們循環綁定數據的時候一般是 v-for:"item in items" 忘了他還有一個index屬性,當前元素的索引.

這里就簡單了,我們在動態循環綁定操作radio數據的時候,把index加上

"<p v-for='(option,optionIndex) in options' @mouseenter='optionEnter($event,optionIndex)' >" 

然后根據索引來刪除options的指定選項,就容易了

vm.options.splice(optionIndex, 1); 

以上所述是小編給大家介紹的vue.js刪除動態綁定的radio的指定項,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女