This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

When I was working on the audit platform, I encountered such a scenario: during the review, some categories were dynamically returned, and there were multiple radio options under each category. The results of the first audit need to be displayed, as shown in the following figure. All the data were returned by the interface:

​

Ideas:

The elder-UI radio < el-radio > tag can be set to default values via v-model binding variables, but as shown in the above image, all data is dynamically returned by the interface, and each set of radio variables cannot be set to default values in the data.

QualitySelect = qualitySelect = qualitySelect = qualitySelect = qualitySelect = qualitySelect = qualitySelect = qualitySelect = qualitySelect = qualitySelect

<table> <tr v-for="(item,index) in qualityLabel" :key="index"> <td>{{item.name}}</td> <td> <el-radio v-for="(option,idx)  in item.labels" v-model="qualitySelect[index]" :label="option.id" :key="idx">{{option.value}}</el-radio> </td> </tr> </table>Copy the code
Data () {return {qualityLabel: [], // qualityOption: [], // qualitySelect: [] // qualitySelect: [] // Default value}}Copy the code
// The interface returns... this.qualityLabel = list.label; // Assign list.quality_label.foreach (item => {this.qualityoption.push (item.name); // Assign list.quality_label.foreach (item => {this.qualityoption.push (item.name); This.qualityselect.push (Number(item.is_checked)); // Store the output data}); .Copy the code
"A list" : {" label ": [{" name" : "image", "typeId" : 1, "labels" : [{" id ": 1," value ":" hd ", "checked" : ""}, {" id" : 2, the "value" : "normal", "checked" : ""}, {" id" : 3, "value" : "jitter", "checked" : ""}, {" id" : 4, "value" : "fuzzy", "checked" : ""}]," is_checked ": 0}, {" name" : "scene painting", "typeId" : 2, "labels" : [{" id ": 5," value ":" advanced ", "checked" : ""}, {" id" : 6, "value" : "daily", "checked" : ""}, {" id" : 7, "value" : "" earthy", "checked" : ""}]," is_checked ": 0}, {" name ":" content, painting style ", "typeId" : 3, "labels" : [{" id ": 8," value ":" no problem ", "checked" : ""}, {9," id ":" value ": "Lack of subtitles", "checked" : ""}, {" id" : 10, "value" : "subtitle typesetting mess", "checked" : ""}, {" id" : 11, "value" : "the title party", "checked" : ""}, {" id" : 12, "value" : "sensory discomfort", "checked" : ""}]," is_checked ": 0}, {" name" : "quality", "typeId" : 4, "labels" : 13, [{" id ":" value ":" high ", "checked" : ""}, {" id" : 14, "value" : "low", "checked" : ""}]," is_checked ": 0}, {" name" : "Pan vulgar," "typeId" : 5, "labels" : [{" id ": 15," value ":" 0 ", "checked" : ""}, {" id" : 16, "value" : "1", "checked" : ""}, {" id" : 17, "value" : "2", "checked" : ""}, {" id" : 18, "value" : "3", "checked" : ""}]," is_checked ": 0}, {" name ":" content form ", "typeId" : 6, "labels" : [{" id ": 19," value ":" high ", "checked" : ""}, {" id" : 20, "value" : "In", "checked" : ""}, {" id" : 21, "value" : "a little boring", "checked" : ""}, {" id" : 22, "value" : "low", "checked" : ""}]," is_checked ": 0}, {" name" : "emotion", "typeId" : 7, "labels" : [{" id ": 23," value ":" is ", "checked" : ""}, {" id" : 24, "value" : ""," checked ":" "}, {" id ": 25," value ":" reverse ", "checked" : ""}]," is_checked ": 0}}]Copy the code