How to distinguish between two attributes when selecting attributes for vue.js products

I"m doing items, adding shopping carts to select attributes
I"m cycling out an array of nested arrays
I choose
color attributes "yellow", "gold", "white"
size properties "M", "L" when clicking on commodity properties. "XL"
I have no problem traversing loop bindings. Now I need to take out the selected values, select "yellow" and then select "M".
now the way I take values is that I can only click one value at a time. How to make a distinction in an array nested array

< div id= "popupSkuArea" v talk for = "ColorHt in HotColorSize" >

                    <div class="sku_kind" v-text="ColorHt.name"></div>
                    <div class="sku_choose" id="skuPop1">
                        <span  v-for="ColorSizeHt in ColorHt.product_option_value">
                            <span class="item" v-text="ColorSizeHt.name"  @click="OfColorSize(ColorSizeHt)"></span>
                        </span>
                    </div>
                </div>
                
                

clipboard.png

clipboard.png


clipboard.png


can't intermediate variables store values of color and size? modify them when you click

.
Menu