Vue 点击添加class类名的问题

Question

代码:

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

---

    <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: [
                  {
                    group_id: "size",
                    group_name: "尺码",
                    prop_value: [
                      "XS",
                      "S",
                      "M",
                      "L"
                    ]
                  },
                  {
                      group_id: "color",
                      group_name: "颜色",
                      prop_value: [
                        "red",
                        "green",
                      ]
                  }
                ]
            },
            methods: {
                selectProp: function (index) {
                    console.log(this)
                }
            }
        });

这种数据结构，怎样让遍历出来的dom元素实现点击之后给自己添加类名的方法啊？

Answer 1

實現

jsFiddle

說明

<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: [
            {
                group_id: "size",
                group_name: "尺码",
                prop_value: [
                    "XS",
                    "S",
                    "M",
                    "L"
                ],
                // 預設沒有
                selected_prop_value: null
           },
           {
               group_id: "color",
               group_name: "颜色",
               prop_value: [
                   "red",
                   "green",
               ],
               // 預設沒有
               selected_prop_value: null
           }
        ]
    },
    methods: {
        selectProp: function (groupIndex, propIndex) {
            // 傳進 groupIndex 和 propIndex ，並放入對應的索引值
            this.prop_group[groupIndex].selected_prop_value = propIndex
        }
    }
});

在拿到後端數據時進行結構的變動

jsFiddle

Answer 2

如果是点击之后添加on-choose这个类名的话，先把select变为false,点击之后再改成true

Answer 3

总感觉怪怪的，data数据结构需要重塑，信息不是很详细。
不知道下面是否是题主想要的结果。
点击阅览