javascript - Vue 循环后的数据更改无法响应。-PHP中文网问答

数组循环渲染到视图上，点击dom 改变数组中的一个布尔值来更新该dom的class。发现数据变了，但相应的class 并没有根据改变后的布尔值去渲染。

原始数据是created 里面获取的，赋给了一个needItem

show() 里面将点中的item 传入 showArr；

showArr 再渲染另一个dom ，该dom 下面的每项都可以通过点击来切换 class。是通过show() 里面刚加的isclass 来判断。

    


    
        

            
                {{item.ITEM_NAME}}
                {{item.INTRO}}
                {{item.ITEM_TYPE}}
                
            
        
        
            

                
                    {{v.IMG_URL}}
                    {{v.ITEM_NAME}}

DATA

    var app = new Vue({
        el: '.app',
        data: {
            needItem: [],
            serverItem: [],
            showArr: []
        },
        methods: {
            show: function (item,VOUCH) {
   
                item.ITEMS.forEach(function (value) {
                    value.isclass = false;
                    if (JSON.stringify(value) == JSON.stringify(VOUCH)) {
                        value.isclass = true;
                    }
                });
                this.showArr = item;
                console.log(this.showArr);
            },
            change: function (v) {
                v.isclass = !v.isclass;
                console.log(v.isclass);
            }
        },

created

        created: function () {
                var data = {
                    "RESPCODE": 0,
                    "RESPMSG": "操作成功",
                    "RESULT": {
                        "MIN_SEP": "5000",
                        "MAIN_MILEAGE": "100000",
                        "IS_CAN_STORE": "0",
                        "NEED_ITEM": [
                        {
                            "IS_VISIT": "0",
                            "ITEM_ID": "1",
                            "ITEM_NAME": "机油",
                            "INTRO": "推荐5000公里修理一次\/6个月",
                            "PRICE": "100",
                            "ITEM_STATUS": "1",
                            "ITEM_TYPE": "1",
                            "ITEMS": [
                            {
                                "ITEM_ID": "23",
                                "ITEM_NAME": "嘉实多（极护）0W-40全合成机油 7L ",
                                "PRICE": "602",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            },
                            {
                                "ITEM_ID": "41",
                                "ITEM_NAME": "金美孚0W-40全合成机油 7L ",
                                "PRICE": "726",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            },
                            {
                                "ITEM_ID": "55",
                                "ITEM_NAME": "壳牌（灰喜力）5W-30全合成机油 7L ",
                                "PRICE": "614",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            },
                            {
                                "ITEM_ID": "982",
                                "ITEM_NAME": "俄罗斯原装进口5W-40合成机油 7L",
                                "PRICE": "508",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            },
                            {
                                "ITEM_ID": "1646",
                                "ITEM_NAME": "俄罗斯原装进口5W-30全合成机油 7L",
                                "PRICE": "764",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            },
                            {
                                "ITEM_ID": "",
                                "ITEM_NAME": null,
                                "PRICE": "764",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            },
                            {
                                "ITEM_ID": "",
                                "ITEM_NAME": null,
                                "PRICE": "508",
                                "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
                                "IS_VOUCH": "1"
                            }
                            ]
                        },
                        {
                            "IS_VISIT": "0",
                            "ITEM_ID": "2",
                            "ITEM_NAME": "机油滤清器",
                            "INTRO": "推荐5000公里修理一次\/6个月",
                            "PRICE": "100",
                            "ITEM_STATUS": "1",
                            "ITEM_TYPE": "1",
                            "ITEMS": [
                            {
                                "ITEM_ID": "0",
                                "ITEM_NAME": "暂无此配件，请致电4008200260",
                                "PRICE": "0",
                                "IMG_URL": "",
                                "IS_VOUCH": "1"
                            }
                            ]
                        },
                        {
                            "IS_VISIT": "0",
                            "ITEM_ID": "5",
                            "ITEM_NAME": "空气滤清器",
                            "INTRO": "推荐5000公里修理一次\/6个月",
                            "PRICE": "100",
                            "ITEM_STATUS": "1",
                            "ITEM_TYPE": "1",
                            "ITEMS": [
                            {
                                "ITEM_ID": "0",
                                "ITEM_NAME": "暂无此配件，请致电4008200260",
                                "PRICE": "0",
                                "IMG_URL": "",
                                "IS_VOUCH": "1"
                            }
                            ]
                        },
                        {
                            "IS_VISIT": "1",
                            "ITEM_ID": "6",
                            "ITEM_NAME": "火花塞",
                            "INTRO": "推荐5000公里修理一次\/6个月",
                            "PRICE": "80",
                            "ITEM_STATUS": "3",
                            "ITEM_TYPE": "2",
                            "ITEMS": [
                            {
                                "ITEM_ID": "0",
                                "ITEM_NAME": "暂无此配件，请致电4008200260",
                                "PRICE": "0",
                                "IMG_URL": "",
                                "IS_VOUCH": "1"
                            }
                            ]
                        },
                        {
                            "IS_VISIT": "1",
                            "ITEM_ID": "8",
                            "ITEM_NAME": "刹车油",
                            "INTRO": "推荐5000公里修理一次\/6个月",
                            "PRICE": "100",
                            "ITEM_STATUS": "3",
                            "ITEM_TYPE": "2",
                            "ITEMS": [
                            {
                                "ITEM_ID": "0",
                                "ITEM_NAME": "暂无此配件，请致电4008200260",
                                "PRICE": "0",
                                "IMG_URL": "",
                                "IS_VOUCH": "1"
                            }
                            ]
                        },
                        {
                            "IS_VISIT": "1",
                            "ITEM_ID": "7",
                            "ITEM_NAME": "变速箱油",
                            "INTRO": "推荐5000公里修理一次\/6个月",
                            "PRICE": "100",
                            "ITEM_STATUS": "3",
                            "ITEM_TYPE": "2",
                            "ITEMS": [
                            {
                                "ITEM_ID": "0",
                                "ITEM_NAME": "暂无此配件，请致电4008200260",
                                "PRICE": "0",
                                "IMG_URL": "",
                                "IS_VOUCH": "1"
                            }
                            ]
                        }
                        ]
                    }
                }
                var arrData = data.RESULT.NEED_ITEM;
                console.log(arrData[1].ITEM_TYPE);
                var needArr = [];
                var serverArr = [];
                for (var i = 0; i < arrData.length; i++) {
                    if (arrData[i].ITEM_TYPE  == 1) {
                        needArr.push(arrData[i]);
                    } else if (arrData[i].ITEM_TYPE == 2) {
                        serverArr.push(arrData[i]);
                    }
                }
                for (var i = 0; i < needArr.length; i++) {
                    for (var j = 0; j< needArr[i].ITEMS.length; j++) {
                        console.log(1);
                        if (needArr[i].ITEMS[j].IS_VOUCH == 1) {
                            needArr[i].VOUCH_ITEM = needArr[i].ITEMS[j];
                            break;
                        }
                    }
                }
                this.needItem = needArr;            
                this.serverItem = serverArr;            
                console.log(needArr, serverArr);
        }