首先说一下业务需求,是要显示订单进度的业务,用的vant框架里的Steps 步骤条组件。
我最开始做的方法是把控制进度写成计算属性返回回去,可一直显示的都是在第一步。我以为是自己if判断的顺利写错了,还没有判断到当前进度,值就在第一步return出去了,就调整了if判断语句的顺序,代码如下:
HTML代码段
<van-steps direction="vertical" :active="process">
<van-step>
<h3>下订单【{{ order.order_no }}】</h3>
<p>总数量:{{ order.num }}件</p>
<p>操作时间:{{ order.add_time }}</p>
</van-step>
<van-step>
<h3 v-if="productList.production_no">
添加生产单信息【{{ productList.production_no }}】
</h3>
<h3 v-else>添加生产单信息</h3>
<p>总数量:{{ productList.num }}件</p>
<p>操作时间:{{ productList.add_time }}</p>
</van-step>
<van-step>
<h3 v-if="cutList.cut_no">添加裁剪信息【{{ cutList.cut_no }}】</h3>
<h3 v-else>添加裁剪信息</h3>
<p>总数量:{{ cutList.num }}件</p>
<p>操作时间:{{ cutList.add_time }}</p>
</van-step>
<van-step>
<h3 v-if="clothesList.clothes_no">
添加入库信息【{{ clothesList.clothes_no }}】
</h3>
<h3 v-else>添加入库信息</h3>
<p>总数量:{{ clothesList.num0 }}件</p>
<p>操作时间:{{ clothesList.add_time }}</p>
</van-step>
<van-step>
<h3 v-if="goodsList.goods_no">
添加发货信息【{{ goodsList.goods_no }}】
</h3>
<h3 v-else>添加发货信息</h3>
<p>总数量:{{ goodsList.num }}件</p>
<p>操作时间:{{ goodsList.add_time }}</p>
</van-step>
</van-steps>
计算属性
computed: {
process: {
get() {
if (this.goodsList.goods_no) {
return 4;
} else if (this.clothesList) {
console.log("this.clothesList", this.clothesList);
console.log("this.clothesList.clothes_no", this.clothesList.clothes_no);
return 3;
} else if (this.cutList.cut_no) {
return 2;
} else if (this.productList.production_no) {
return 1;
}
return 0;
},
},
},
打印出来的clothesList有值,clothesList里的clothes_no也有值,打印出来的clothesList.clothes_no却显示undefined,忧伤…
接口返回回来的数据,除了发货信息其他节点的数据都有,也都已经赋值到了视图上,可是进度却一直显示还在订单
最后无奈把对process的赋值放在了ajax请求里,代码如下
getData() {
let ID = localStorage.getItem("orderId");
let url = "/index/detail?order_id=" + ID;
get(url).then((resData) => {
console.log(resData);
let style = {};
if (resData.data.code == 0) {
style = resData.data.data.style;
this.sizes = style.size_arr;
this.colors = style.color_arr;
this.orderDetail = resData.data.data.orderDetail;
Object.assign(this.order, resData.data.data.info);
Object.assign(this.productList, resData.data.data.productList[0]);
Object.assign(this.cutList, resData.data.data.cutList[0]);
Object.assign(this.clothesList, resData.data.data.clothesList[0]);
Object.assign(this.goodsList, resData.data.data.goodsList[0]);
if (this.goodsList.goods_no) {
this.process = 4;
} else if (this.clothesList) {
console.log("this.clothesList.clothes_no", this.clothesList);
this.process = 3;
} else if (this.cutList.cut_no) {
this.process = 2;
} else if (this.productList.production_no) {
this.process = 1;
}
console.log("productList", this.productList);
}
});
然后功能正常,所以有大佬解释一下为啥在计算属性里取不到对象里面的值,还有什么更好的方法吗?