vue 数据渲染默认值 数据改变重新渲染

组件

html

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  的区别就不过多介绍了，可自行百度）

首先      // falg  默认false

当数据请求成功后   this.falg = true;  在渲染组件   。

这是我在项目中遇到的问题，希望可以帮助到大家。