首先在这里讲一下失败的原因:
在加载渲染时,调取接口请求的是一个异步的操作,在子组件拿到数据前就渲染了,才导致子组件watch没有监听到值的变化
解决方法:
可以在uni-data-select标签内加入v-if,初始值为false,在调取接口改变数据时将值改为true即可
具体操作如下:
1>html代码
<uni-data-select
v-model="value"
v-if="show"
:localdata="range"
@change="change"
:clear="false"
label="可选地点"
></uni-data-select>
2>js代码
export default {
data() {
return {
value: 0,
range: [],
show:false
}
},
async created() {
//在这里ajax是我自己封装的
const All = await ajax('你自己的接口', 'GET', {})
const myrange = []
All.result.forEach((val, index) => {
myrange.push({ value: index, text: val.roomName })
})
this.range = myrange
this.show= true
}
}