父页面传递给组件的数据变更,子组件监控不到。
父页面wxml:
<dropdownmenu wx:if="{{currentTabIndex === 0}}" dropDownMenuTitle='{{dropDownMenuTitle}}' dropDownMenuDistrictData='{{data1}}' dropDownMenuFilterData='{{data2}}' bind:selectedItem='selectedItem'/> |
父页面js:
data1一级菜单是写死的就2个。
data: { data1: [{ id: 0, title: '不限', }, { id: 1, title: '汽修', enTitle: 'qixiu', childModel: [] }, { id: 2, title: '汽配', enTitle: 'qipei', childModel: [] } ],} |
data1二级菜单是动态获取的。
getCategoryList() { let that = this; topicApi.getCategoryList(that); }, |
topicApi中的getCategoryList方法
function getCategoryList(pageObj) { let that = pageObj; that.data.data1.forEach((item, index) => { if (item.enTitle) { let trade = item.enTitle; util.request(`${api.getCategoryList}?trade=${trade}`).then(res => { let childModel = []; res.data.forEach((item2, index2) => { let childModelElement = { id: `${index}-${index2 + 1}`, // '1-1', title: item2 }; childModel.push(childModelElement); }); // res.data.forEach console.log('——————————childModel: ', childModel); // 调试用 that.data.data1[index].childModel = that.data.data1[index].childModel.concat(childModel); console.log('——————————that.data.data1[index]: ', that.data.data1[index]); // 调试用 }); // util.request } // if (item.enTitle) }); // forEach that.setData({ data1: that.data.data1 }) console.log('——————————that.data.data1: ', that.data.data1); // 调试用} |
子组件相关代码:
Component({ properties: { dropDownMenuDistrictData: { type: Array, value: [], observer: function (newVal, oldVal) { console.log('——————————属性改变了, new, old: ', newVal, oldVal); // 调试用 console.log('——————————this.properties.dropDownMenuDistrictData: ', this.properties.dropDownMenuDistrictData); } }, }} |
问题,当data1固定值时,显示是正常的。
而当data1是我如上面代码是动态的时候,显示就为空。主要是属性变更无法监控到,网络请求还在属性变更之后。打印的日志如下。
求懂的人指点一二,跪谢
