思否的老哥，给愚弟看看这个问题有没有解决思路

Question

问题出在数据源里 'difference':'白色,100' 必须先尺寸在颜色 'difference':'100,白色' ,用100,白色匹配下图的数据源，但是这个数据源有时候是 白色,100就报错了，有解决思路么，各位老哥，思否人才多啊

<div id="vmsimulatedDATA" class="productBox">
    <div class="productConten">
        <div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications">
            <p>{{ProductItem.name}}</p>
            <ul class="product-footerlist clearfix">
                <li v-for="(oItem,index) in ProductItem.item" v-on:click="specificationBtn(oItem.name,n,$event,index)" v-bind:class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'productActive':'']">{{oItem.name}}</li>
            </ul>
        </div>
    </div>
    <div class="product-footer">
        <a href="javascript:">立即购买</a>
    </div>
</div>
<script>
    var vmsimulatedDATA = new Vue({
        el: "#vmsimulatedDATA",
        data: {
            simulatedDATA: { //模拟后台返回的数据 多规格
                "difference": [{ //所有的规格可能情况都在这个数组里
                        "id": "19",
                        "price": "200.00",
                        "stock": "19",
                        "difference": "白色,100"
                    },
                    {
                        "id": "20",
                        "price": "300.00",
                        "stock": "29",
                        "difference": "200,白色"
                    },
                    {
                        "id": "21",
                        "price": "300.00",
                        "stock": "10",
                        "difference": "100,黑丝"
                    },
                    {
                        "id": "22",
                        "price": "300.00",
                        "stock": "0",
                        "difference": "200,黑丝"
                    },
                    {
                        "id": "23",
                        "price": "500.00",
                        "stock": "48",
                        "difference": "100,绿色"
                    },
                    {
                        "id": "24",
                        "price": "500.00",
                        "stock": "0",
                        "difference": "200,绿色"
                    }
                ],
                "specifications": [{ //这里是要被渲染字段
                        "name": "尺寸",
                        "item": [{
                                "name": "100",
                            },
                            {
                                "name": "200",
                            }
                        ]
                    },
                    {
                        "name": "颜色",
                        "item": [{
                                "name": "白色",
                            },
                            {
                                "name": "黑丝",
                            },
                            {
                                "name": "绿色",
                            }
                        ]
                    }
                ]
            },
            selectArr: [], //存放被选中的值
            shopItemInfo: {}, //存放要和选中的值进行匹配的数据
            subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
        },
        created: function () {
            var self = this;
            for (var i in self.simulatedDATA.difference) {
                self.shopItemInfo[self.simulatedDATA.difference[i].difference] = self.simulatedDATA.difference[
                    i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
            }
            self.checkItem();
        },
        mounted: function () {
     
        },
        methods: {
            specificationBtn: function (item, n, event, index) {
                var self = this;
                if (self.selectArr[n] != item) {
                    self.selectArr[n] = item;
                    self.subIndex[n] = index;
     
                } else {
                    self.selectArr[n] = "";
                    self.subIndex[n] = -1; //去掉选中的颜色 
                }
                self.checkItem();
            },
            checkItem: function () {
                var self = this;
                var option = self.simulatedDATA.specifications;
                var result = [];  //定义数组存储被选中的值
                for (var i in option) {
                    result[i] = self.selectArr[i] ? self.selectArr[i] : '';
                }
                            console.log(this.option)
                for (var i in option) {
                    var last = result[i];  //把选中的值存放到字符串last去
                    for (var k in option[i].item) {
                        result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
                        option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
                    }
                    result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
     
                }
                self.$forceUpdate(); //重绘
            },
            isMay: function (result) {
                for (var i in result) { 
                    if (result[i] == '') {
                        return true; //如果数组里有为空的值，那直接返回true
                    }
                }
                console.log(result)
                console.log(this.shopItemInfo)
                return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
            }
     
        }
    })

</script>

Answer 1

判断key的组成顺序，如果不是数值在前，颠倒key

created: function () {
    var self = this;
    for (var i in self.simulatedDATA.difference) {
        let key = self.simulatedDATA.difference[i].difference
        if(!/^d+,/.test(key)){
            key = key.split(',').reverse().join(',')
        }
        self.shopItemInfo[key] = self.simulatedDATA.difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
    }
    self.checkItem();
}