先看效果
【背景】picker里面的数据需要动态加载
【文档】技术文档,地址:Picker 选择器 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架
<template>
<view>
<u-picker :show="show" :columns="columns"></u-picker>
<u-button @click="show = true">打开</u-button>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
columns: [
['中国', '美国', '日本']
],
}
}
}
</script>
【问题代码】
vue
<u-picker
:show="pickShow"
:columns="pickerColumns"
:defaultIndex="[1]"
keyName="title"
@cancel="pickShow = false"
@confirm="pickShow = false"
></u-picker>
data
pickerColumns:[]
onload...
this.init()
method...
init(){
let that = this
let params = {}
params = {
pageIndex: 1,
pageSize: 999,
}
that.$http.post(that.requestUrl.api.xxx, params).then(res => {
if (res.statusCode === 200 && res.data.code === 200) {
that.pickerColumns[0] = res.data.data.list
}
}).catch(reason => {
console.log('Failed: ' + reason);
});
},
【可运行代码】
vue
<u-picker
:show="pickShow"
:columns="pickerColumns"
:defaultIndex="[1]"
keyName="title"
@cancel="pickShow = false"
@confirm="pickShow = false"
></u-picker>
data
pickerColumns:[]
onload...
this.init()
method...
init(){
let that = this
let params = {}
params = {
pageIndex: 1,
pageSize: 999,
}
that.$http.post(that.requestUrl.api.xxx, params).then(res => {
if (res.statusCode === 200 && res.data.code === 200) {
that.pickerColumns = [res.data.data.list]
}
}).catch(reason => {
console.log('Failed: ' + reason);
});
},
【两者差异】
未成功显示
that.pickerColumns[0] = res.data.data.list
成功显示
that.pickerColumns = [res.data.data.list]
很奇怪,虽然这者得到的结果是一样的,但是就是有问题,谁懂?