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);
        }

麻烦帮我解答一下，谢谢额。

用了个超笨的办法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .boclass { background: red; } </style> <body> <p class="app"> <ul> <li v-for="item in needItem"> <p>{{item.ITEM_NAME}}</p> <p>{{item.INTRO}}</p> <p>{{item.ITEM_TYPE}}</p> <button @click="show(item,item.VOUCH_ITEM)">点这里</button> </li> </ul> <p class="show"> <ul> <li v-for="(v,index) in showArr.ITEMS" :class="{'boclass':v.isclass}" @click="change(index)"> <p>{{v.IMG_URL}}</p> <p>{{v.ITEM_NAME}}</p> </li> </ul> </p> </p> </body> <script src='vue.js'></script> <script> var app = new Vue({ el: '.app', data: { needItem: [], serverItem: [], showArr: [] }, methods: { show: function(item, VOUCH) { var _this = this; item.ITEMS.forEach(function(value) { value.isclass = false; if (JSON.stringify(value) == JSON.stringify(VOUCH)) { if (JSON.stringify(value) == JSON.stringify(VOUCH)) { value.isclass = true; } } }); this.showArr = item; }, change: function(index) { var _this = this; this.showArr.ITEMS.map(function(value, i) { value.isclass = false; if (i === index) { value.isclass = true; } }); this.showArr = JSON.parse(JSON.stringify(this.showArr)); } }, 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; 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++) { if (needArr[i].ITEMS[j].IS_VOUCH == 1) { needArr[i].VOUCH_ITEM = needArr[i].ITEMS[j]; break; } } } this.needItem = needArr; this.serverItem = serverArr; } }) </script> </html>

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