vue.js給動態(tài)綁定的radio列表做批量編輯的方法

發(fā)布時間：2020-09-10 21:06:10 來源：腳本之家閱讀：399 作者：xiaoqiu_net 欄目：web開發(fā)

每個題目綁定的題目結(jié)構(gòu)如下json對象，每次動態(tài)添加選項就是將其加入了vue實例的某個數(shù)組對象中：

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

現(xiàn)在對radio或者checkbox集合列表進行批量添加，這里使用到了textarea容器.

textare每一行都是一條數(shù)據(jù)，它的內(nèi)部是根據(jù)回車來區(qū)分(break-word自動換行不算)，每一行是一個對象，整體就是一個文本數(shù)組了，獲取如下：

var contents = $("#optionsArea").val().split("\n");

獲取到數(shù)組，他只是個文本數(shù)組，我們動態(tài)綁定的radio列表卻是一個個json對象，所以再把文本數(shù)組轉(zhuǎn)成vue綁定一致的格式：

先清空數(shù)組：

vm.options.length = 0;

再將文本數(shù)組映射成vue綁定需要的數(shù)據(jù)結(jié)構(gòu)：

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

以上這篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

猜你喜歡