首頁 > web前端 > js教程 > 主體

在vue.js中如何給動態綁定的radio列表做批次編輯

亚连
發布: 2018-06-04 10:48:55
原創
2023 人瀏覽過

下面我就為大家分享一篇vue.js給動態綁定的radio列表做批量編輯的方法,具有很好的參考價值,希望對大家有所幫助。

每個題目綁定的題目結構如下json對象,每次動態添加選項就是將其加入了vue實例的某個數組對象:

vm.options.push({ id: "", text: "新选项", checked: false });
登入後複製

現在對radio或checkbox集合清單進行批量添加,這裡使用到了textarea容器.

textare每一行都是一條數據,它的內部是根據回車來區分(break-word自動換行不算),每一行是一個對象,整體就是一個文本數組了,獲取如下:

var contents = $("#optionsArea").val().split("\n");
登入後複製

獲取到數組,他只是個文本數組,我們動態綁定的radio列表卻是一個個json對象,所以再把文字陣列轉成vue綁定一致的格式:

先清空數組:

vm.options.length = 0;
登入後複製

再將文字陣列對應成vue綁定需要的資料結構:

vm.options = contents.map(function (item, index, arr) { 
 return { 
 id: "", 
 text: item, 
 checked: false 
 } 
});
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在vue中如何實現剪裁圖片並上傳伺服器功能

如何解決easyui日期時間框ie的相容的實際問題(詳細教學)

詳細為你講解Immutable及React 中實踐技巧

#

以上是在vue.js中如何給動態綁定的radio列表做批次編輯的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板