Vue Click to Add class Name

  node.js, question

Code:

.prop-val {
 display: inline-block;
 font-size: .12rem;
 cursor: pointer;
 border: 1px solid #ed145b;
 padding: .02rem .05rem;
 color: #ed145b;
 margin: .05rem;
 bracket
 .on-choose {
 color: #fff;
 background-color: #ed145b;
 bracket


<div id="myapp">
 <template v-for="i in prop_group">
 <div>{{ i.group_name }}</div>
 <div class="prop-val" :class="{ 'on-choose': select }" v-for="val in i.prop_value" v-on:click="selectProp">{{ val }}</div>
 </template>
 </div>


new Vue({
 el: '#myapp',
 data: {
 select: true,
 numControl:{
 num: 1,
 maxLimit: 10,
 minLimit: 1,
 saleOff: false
 },
 prop_group: [
 bracket
 group_id: "size",
 Group_name: "size",
 prop_value: [
 "XS",
 "S",
 "M",
 "L"
 bracket
 },
 bracket
 group_id: "color",
 Group_name: "color",
 prop_value: [
 "red",
 "green",
 bracket
 bracket
 bracket
 },
 methods: {
 selectProp: function (index) {
 console.log(this)
 bracket
 bracket
 });

This kind of data structure, how to let the traversed dom elements realize the method of adding class names to themselves after clicking?

Realization

jsFiddle

explain

<div id="myapp">
 <template v-for="i in prop_group">
 <div>{{ i.group_name }}</div>
 <div class="prop-val" :class="{ 'on-choose': i.selected_prop_value === $index }" v-for="val in i.prop_value" v-on:click="selectProp($parent.$index, $index)">{{ val }}</div>
 </template>
 </div>
new Vue({
 el: '#myapp',
 data: {
 numControl: {
 num: 1,
 maxLimit: 10,
 minLimit: 1,
 saleOff: false
 },
 prop_group: [
 bracket
 group_id: "size",
 Group_name: "size",
 prop_value: [
 "XS",
 "S",
 "M",
 "L"
 ],
 //No by default
 selected_prop_value: null
 },
 bracket
 group_id: "color",
 Group_name: "color",
 prop_value: [
 "red",
 "green",
 ],
 //No by default
 selected_prop_value: null
 bracket
 bracket
 },
 methods: {
 selectProp: function (groupIndex, propIndex) {
 //Pass in groupIndex and propIndex and put in the corresponding index value
 this.prop_group[groupIndex].selected_prop_value = propIndex
 bracket
 bracket
 });

Make structural changes when getting back-end data

jsFiddle