vue.js刪除動態(tài)綁定的radio的指定項
更新時間：2017年06月02日 10:06:45 作者：Coding_xiaoqiu
這篇文章主要介紹了vue.js刪除動態(tài)綁定的radio的指定項,需要的朋友可以參考下
上圖效果，動態(tài)添加綁定radio選項，然后也可以動態(tài)刪除，右邊編輯器刪除，左邊的視圖也對應(yīng)的刪除。
視圖代碼 view：
"<ul><li v-for='option in options'>" +
"<input type='radio' :name='groupName'>{{option.text}}" +
"</li></ul>",
數(shù)據(jù)綁定model.options：
options: [{ id: 1, text: '選項1', checked: false }, { id: 2, text: '選項2', checked: false }]
動態(tài)添加：
vm.options.push({ id: "", text: "新選項", checked: false });
動態(tài)刪除指定radio，我們存儲的是json對象動態(tài)添加到options數(shù)組中去，取的時候在每個事件可以傳入$event對象，可以獲取到當前事件源,DOM對象，但是vm.options是個數(shù)組，沒法很好的匹配DOM來刪除指定的數(shù)組項。
在我們循環(huán)綁定數(shù)據(jù)的時候一般是 v-for:"item in items" 忘了他還有一個index屬性，當前元素的索引.
這里就簡單了，我們在動態(tài)循環(huán)綁定操作radio數(shù)據(jù)的時候，把index加上
"<p v-for='(option,optionIndex) in options' @mouseenter='optionEnter($event,optionIndex)' >"
然后根據(jù)索引來刪除options的指定選項，就容易了
vm.options.splice(optionIndex, 1);
以上所述是小編給大家介紹的vue.js刪除動態(tài)綁定的radio的指定項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧2023-10-10
vue實現(xiàn)一個6個輸入框的驗證碼輸入組件功能的實例代碼
這篇文章主要介紹了vue實現(xiàn)一個6個輸入框的驗證碼輸入組件功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
在Vue開發(fā)中使用:style綁定樣式是常見需求,應(yīng)注意:class與:style的配合使用,錯誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個樣式,這些技巧有助于提高開發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue簡單練習(xí) 桌面時鐘的實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值的相關(guān)資料,需要的朋友可以參考下2019-09-09
搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)
這篇文章主要介紹了搭建Vue從Vue-cli到router路由護衛(wèi)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
elementui?Select選擇器嵌套tree實現(xiàn)TreeSelect方式
這篇文章主要介紹了elementui?Select選擇器嵌套tree實現(xiàn)TreeSelect方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue遞歸獲取父元素的元素實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue項目中Token的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載
學(xué)了vue寫項目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時間。本文主要介紹了vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載，感興趣的可以了解一下2021-06-06