极客观点
研发管理
HarmonyOS
数组循环渲染到视图上，点击dom 改变数组中的一个布尔值来更新 该dom的class。发现数据变了，但相应的class 并没有根据改变后的布尔值去渲染。
原始数据是created 里面获取的，赋给了一个needItem
show() 里面将 点中的item 传入 showArr；
showArr 再渲染另一个dom ，该dom 下面的每项都可以通过点击来切换 class。 是通过show() 里面刚加的isclass 来判断。
<style>
.boclass {
background: red;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="item in needItem">
<div>{{item.ITEM_NAME}}</div>
<div>{{item.INTRO}}</div>
<div>{{item.ITEM_TYPE}}</div>
<button @click="show(item,item.VOUCH_ITEM)">点这里</button>
</li>
</ul>
<div class="show">
<ul>
<li v-for="v in showArr.ITEMS" :class="{'boclass':v.isclass}" @click="change(v)">
<p>{{v.IMG_URL}}</p>
<p>{{v.ITEM_NAME}}</p>
</li>
</ul>
</div>
</div>
</body>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);
}
麻烦帮我解答一下，谢谢额。
html5
可以看看 vue 的列表渲染： 列表渲染注意事项
数组的一些更新无法 watch，需要手动调用函数触发。