组件
html
<van-picker :columns="columns" @change="onChange" v-if="falg"/>
js
let arr = {} // 首先 定义一个外部变量 注意：这里的变量是不会被页面渲染的
export default {
data（）{ // 在vue 中 只有 data中的数据才会被渲染
return(){
citys: {}, //定义一个对象 用来接收请求来的数据
falg ： false, //判断组件的显示
columns: [ // 这里引用了 vant ui 的数据格式 可以忽略 重点不在这
{
values: Object.keys(citys), // 主要看这里 接收 外部的变量 citys
className: 'column1'
},
{
values: citys['餐饮'],
className: 'column2',
defaultIndex: 2
}
]
}
}，
methods:{
send(){
this.$axios.post('/post/data') // 这里是请求的端口
.then((res)=>{
if(res.status == 200){
this.falg = true; // 数据请求成功 才渲染 组件
// this.citys = {}; // 必要的时候 可以加上， 这个的意思是的 从新定义 citys 原因是 当vue渲染的时候会首先渲染 data里面的数据，他不会等到你数据请求成功 以后在渲染 ， 等于是一个双保险
res.data.data.map((item,index)=>{
.then((res)=>{
console.log(res)
})
this.citys[item.off_category_name]=[item.id]
})
arr= JSON.parse(JSON.stringify(this.citys))
}else{
alert("请求出错")
}
})
},
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
},
mounted(){ // 生命周期 表示 已经挂载 并且渲染
this.send(); // 调用
},
beforeUpdate(){ // 注意 ： 这里也是生命周期 代表当页面发生变化的时候 重新赋值
this.columns[0].values = Object.keys(citys); // 重新赋值
this.columns[1].values = citys['默认值']; // 重新赋值
},
}
说明： 当我们渲染数据的时候，经常出现数据没有加载过来，但是页面已经渲染的问题，
这个时候 我们可以这样想，我可不可以等数据请求成功后，在渲染对应的数据呢？
大家第一想法肯定是 beforeUpdate 但是 有的时候，我们发现这并不起作用。
解决办法就是 在组件上面加一个判断 注意一定要是 v-if （v-if 和 v-show 的区别就不过多介绍了，可自行百度）
首先 <van-picker :columns="columns" @change="onChange" v-if="falg"/> // falg 默认false
当数据请求成功后 this.falg = true; 在渲染组件 。
这是我在项目中遇到的问题，希望可以帮助到大家。
网友评论