vue循环后不能下滑_Vue 循环后的数据更改无法响应。

2024-04-24 01:12:34

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

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

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

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

.boclass {

background: red;

}

{{item.ITEM_NAME}}

{{item.INTRO}}

{{item.ITEM_TYPE}}

点这里

{{v.IMG_URL}}

{{v.ITEM_NAME}}

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

}

},

createdcreated: 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);

}

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

vue循环后不能下滑_Vue 循环后的数据更改无法响应。相关推荐

vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
vue展示日历考勤展示_VUE实战—菜单栏商品展示数据交互（8）
上篇我们将菜单栏,商品展示结构完成,本次我们为这两个部分接入数据. 菜单栏接入数据导入组件,定义需要的数据格式 <script> // 导入BScroll 滚动组件 import BSc ...
angular for 停顿几秒后继续执行_Java 循环结构 for, while 及 do…while
Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...
vue if判断_vue循环判断
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>条件与 ...
Vue路由传参及传参后刷新导致参数消失处理
参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第 ...
vue将json格式的字符串格式化后输出到web界面上
vue将json格式的字符串格式化后输出到web界面上 <div><textarea readonly style="width: 100%;height: 600px;c ...
vue数组循环遍历中途跳出整个循环
vue数组循环遍历中途跳出整个循环,使用some进行循环,return true时,跳出整个循环 judgePoint(arr) {if (this.haveError) {this.haveErro ...
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了 1.问题 2.原因这次可能的原因 3.过渡方案 4.解决方案 4.1 配置nginx服务器 4.2 前端打包保留两个版本 ...
如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包并且修改后不需要重新打包
如何让一个vue项目支持多语言(vue-i18n) 1.安装:npm install vue-i18n --save 2.在main.js中引入vue-i18n import VueI18n from ...

最新文章

热门文章