所以渲染部分代码有错 没有联系local里的数据渲染
我是直接拿到json数据 及 local id 里的num 直接渲染到html
正确是: 拿到json数据 遍历它 拿到json的id 将这个json id 看是否在local中
如果没在就返回false 用外在变量接收它 filter返回一个符合条件的数组
就是json id 在 local id 中有的去渲染
如果不判断直接渲染 就是整个json 无论怎么增删改查 刷新后渲染的都是整个json数据
所以要与local中id匹配 存在的拿出来渲染
所以又设置了另一个函数 传值 filter新返回的数组 遍历它 还有local中的cart 为参数
这样遍历渲染它 cart是为了 item.id 作为cart的id 可以拿到cart的num 用在数量中
async getnum(){
// 拿到localstage的数据 请求数据
let cartgoods = localStorage.getItem('cart')
// 没有数据则停止
if (!cartgoods) return;
//转化为数组
cartgoods = JSON.parse(cartgoods)
//请求数据
let date = await axios.get({url:'./js/goods.json',data:'',dataType :''})
date = JSON.parse(date)
console.log(date)
//循环商品的信息 根据id获取购物车中的值,有值说明商品在
let existsCartGoods = date.filter(item => {
console.log(item.id);
// console.log(cartgoods[item.id]);
// 结果为数字 转化为 true undefined 转化为false
return cartgoods[item.id];
})
this.showpage( existsCartGoods,cartgoods)
}
showpage(date,ct){
// let arr = JSON.parse(date)
// console.log(arr)
let html =''
//遍历它
date.forEach(ele => {
html += `<tr goods-id="${ele.id}">
<td class="checkbox"><input class="check-one check" type="checkbox"></td>
<td class="goods"><img src="${ele.src}" alt=""><span>${ele.name}</span></td>
<td class="price">${ele.price}</td>
<td class="count">
<span class="reduce">-</span>
<input class="count-input" type="text" value="${ct[ele.id]}">
<span class="add">+</span></td>
<td class="subtotal">${ele.price*ct[ele.id]}</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>`
});
//追加到页面上 拿到tbody
_$('#cartTable tbody').innerHTML = html;
}