快捷導(dǎo)航

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

更新時(shí)間：2018年02月28日 08:38:28 作者：xiaoqiu_net

下面小編就為大家分享一篇vue.js給動(dòng)態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

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

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

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

獲取到數(shù)組，他只是個(gè)文本數(shù)組，我們動(dòng)態(tài)綁定的radio列表卻是一個(gè)個(gè)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給動(dòng)態(tài)綁定的radio列表做批量編輯的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue配置啟動(dòng)項(xiàng)目自動(dòng)打開瀏覽器方式
這篇文章主要介紹了vue配置啟動(dòng)項(xiàng)目自動(dòng)打開瀏覽器方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
webpack+vue.js快速入門教程
隨著前端的快速發(fā)展，非常多的js框架被應(yīng)用到項(xiàng)目中。Vue.js本身支持對組件的異步加載,配合Webpack的分塊打包功能,可以極其輕松地實(shí)現(xiàn)組件的異步按需加載。這篇文章是webpack+vue.j的入門教程，有需要的可以參考借鑒。
2016-10-10
詳解Vue-cli來構(gòu)建Vue項(xiàng)目的步驟
這篇文章主要為大家介紹了Vue-cli來構(gòu)建Vue項(xiàng)目的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vue引入elementUi后打開頁面報(bào)錯(cuò)Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開頁面報(bào)錯(cuò)Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue實(shí)現(xiàn)百度下拉列表交互操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
vue給組件傳遞不同的值方法
今天小編就為大家分享一篇vue給組件傳遞不同的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟,項(xiàng)目中經(jīng)常有中英文切換的功能,接下來就簡單實(shí)現(xiàn)以下這個(gè)功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考
2023-11-11
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue中對虛擬dom的理解知識點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于vue中對虛擬dom的理解知識點(diǎn)總結(jié)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)參考下。
2021-06-06
vue實(shí)現(xiàn)拖拽與排序功能的示例代碼
在Web應(yīng)用程序中,實(shí)現(xiàn)拖拽和排序功能是非常常見的需求,本文為大家介紹了如何使用Vue來實(shí)現(xiàn)一個(gè)簡單但功能強(qiáng)大的拖拽與排序功能,感興趣的小伙伴可以參考下
2023-10-10