How to batch edit dynamically bound radio lists in vue.js

Below I will share with you a vue.js method for batch editing of dynamically bound radio lists. It has a good reference value and I hope it will be helpful to everyone.

The question structure bound to each question is as follows json object. Each time an option is dynamically added, it is added to an array object of the vue instance:

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

Now add the radio or checkbox collection list in batches. The textarea container is used here.

Each line of textare is a piece of data, and its interior is distinguished by carriage returns (break-word does not wrap automatically) Calculate), each line is an object, and the whole is a text array. The acquisition is as follows:

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

Obtain the array, which is just a text array, but the radio list we dynamically bind is a json object. So then convert the text array into a format consistent with vue binding:

Clear the array first:

vm.options.length = 0;

Then map the text array to vue binding requirements The data structure:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the function of cropping pictures and uploading to the server in vue

How to solve the compatibility of easyui date and time box ie Practical problems (detailed tutorial)

Explain to you in detail the practical skills in Immutable and React

The above is the detailed content of How to batch edit dynamically bound radio lists in vue.js. For more information, please follow other related articles on the PHP Chinese website!