极客观点
项目管理
HarmonyOS
先上个图片
循环列表之后每个商品中的计数器加减事件之后第一个商品会触发视图更新 其他的数据会更改但是视图不会更新，试了很多种方法都不行，不明白是哪里除了问题
<template>
<div>
<timeline ></timeline>
<div class="box_1200">
<h1 class="order_title">商品订购单</h1>
<div class="order_list">
<ul class='order_thead clearfix'>
<li>
<el-checkbox v-model="allChecked" @change="selectAll" :text-color="'#c0000f'" class="radio">全选</el-checkbox>
</li>
<li class="order_special">
<span>商品信息</span>
</li>
<li>
<span>单价</span>
</li>
<li>
<span>数量</span>
</li>
<li>
<span>含税金额</span>
</li>
<li>
<span>重量</span>
</li>
<li>
<span>操作</span>
</li>
</ul>
<div class="order_line"></div>
<div class="order_shop_item" v-for="(v,i) in list" :key="i" >
<div class="os_check">
<el-checkbox v-model="v.isChecked" :text-color="'#c0000f'" class="radio"></el-checkbox>
</div>
<div class="os_detail clearfix">
<img :src="v.goods.goods_mainpic?v.goods.goods_mainpic.split(',')[0]:''">
<p>{{v.goods.goods_name}}</p>
</div>
<div class="os_price">￥{{v.goods.goods_price}}</div>
<div class="os_num">
<p class="num_box ">
<span @click="sub(i)">-</span><input type="type" :index="i" :value="v.num" @input="changeNum" /><span @click="add(i)">+</span>
</p>
</div>
<div class="os_tax">￥{{v.goods.goods_price*v.goods.goods_rules*v.num}}</div>
<div>{{v.goods.goods_rules*v.num}}kg</div>
<div>删除</div>
</div>
</div>
</div>
<div class="clear_footbox">
<div class="box_1200 clearfix">
<div class="fl cf_checkBox">
<el-checkbox v-model="allChecked" @click="selectAll" :text-color="'#c0000f'" class="radio">全选</el-checkbox>
</div>
<div class="fr clearfix">
<router-link to="/result" class="result_btn fr">去结算</router-link>
<div class="fr result_price">
<p> 含税总计：<em>￥255</em></p>
<p>合计总重量：100000kg</p>
</div>
<h5 class="fr selected_num">已选中<em> 5 </em>件</h5>
</div>
</div>
</div>
</div>
</template>
<script>
import timeline from '../components/timeline.vue'
import {ajax} from '../assets/ajax.js'
export default {
name: 'App',
data(){
return{
list:[],
allChecked:false,//当前是否全选
}
},
mounted(){
var _this = this;
ajax({
url:'/web/shopping_car/list.do',
data:{},
success:function(data){
var data = data.body;
if(data.status==200){
data.data.forEach(function(v,i){
v.num = 0;
_this.$set(v, 'isChecked', false);
_this.list = data.data;
})
}
}
})
},
components:{timeline},
methods:{
changeNum(e){
this.$set(this.list[e.target.getAttribute('index')],'num',e.target.value);
},
add(i){//加减事件
this.list[i].num+=1;
//this.$set(this.list[i],'num',this.list[i].num+=1) 试过也不行
},
sub(i){//加减事件
this.list[i].num>0?this.list[i].num-=1:0;
},
selectAll(){//全选
if (this.allChecked) {
this.list.forEach(function (item) {
item.isChecked = true;
});
} else {
this.list.forEach(function (item) {
item.isChecked = false;
});
}
}
},
watch:{
list:{
handler(value){
var _this = this;
var count=0;
for(var i=0;i<value.length;i++){
if(value[i].isChecked){
count++;
}
}
//如果子集全部选中，全选按钮设置选中状态
if(count==value.length){
_this.allChecked = true;
}else{
_this.allChecked = false;
}
},
deep:true
},
}
}
</script>
<input type="type" :index="i" :value="v.num" @input="changeNum" />这里用v-model="v.num"试下