Vue double-layer loop to achieve each line clickable to choose one how to solve?

to achieve this effect, can select one from top to bottom. Now you can only select one from top to bottom (or select synchronization from top to bottom)

.

clipboard.png


clipboard.png

clipboard.png

clipboard.png

there are two layers, but how many pieces of data are uncertain
anyway, I just want to realize that each row of the second layer can choose a
everybody Gods help

Jul.19,2022

the problem lies in the filterClick function. This.isActive=index+ "-" + I;
isActive can only store one selected value. When the second is selected, isActive will be refreshed to the second value.
isActive should be initialized as an array, changing the value of isAcitve [index] corresponding to index each time.
initialize:
data () {

return {
    isActive:[]
};

}
function modification:
filterClick (index,i) {

this.isActive[index]=i;

}

if it's helpful, please like it or adopt it


Outer vmurforfor= "(item, pIndex) in data1"
memory @ click= "switchEvent (pIndex, index)"
vripforfor= "(choiceItem, index) in item.data2"
: class= "{'choiceItemOn': index = = choiceOn [pIndex]}"

data (return {choiceOn: [0ct 0],})

method: {

switchEvent(index, pIndex){
    this.choiceOn[index] = pIndex
    this.$forceUpdate();//
},
}

}

the methods of the above bosses are summarized successfully. Simple and convenient. You don't need + 1 or id

.
Menu