首页 > 开发 > JS > 正文

vue,ajax获取本地的json文件,赋值后,computed和mounted里访问不到重新赋值后的listDatas

2017-09-05 05:51:24  来源:网友分享

ajax获取本地的json文件,取到数据之后赋值给data的listDatas,view页面更新了,但是computed和mounted里访问不到重新赋值后的listDatas,除了在$get()里能访问到重新赋值后的data,其他无论在哪都访问不到更新后的listDatas,访问到的都是初始值!

<script>    import classTitleTab from './classTitle.vue'    import comboListTab from './comboList.vue'    import Vue from 'vue'    import {store} from '../vuex/store.js'    import VueResource from 'vue-resource'    Vue.use(VueResource)    export default {        name: 'comboList',        data () {            return {                listDatas:[22,22],            }        },        store,        computed:{                    //计算属性,给获取后的数据排序            hosDatas:function() {                let datas = [];                for(let i = 0; i < this.listDatas.length; i++){                    for(var j = i + 1;j < this.listDatas.length; j++){                        if(this.listDatas[i] > this.listDatas[j]){                            let list = this.listDatas[i];                            this.listDatas[i] = this.listDatas[j];                            this.listDatas[j] = list                        }                    };                    datas.push(this.listDatas[i])                };                return datas            }        },        //本地获取json数据        created:function() {            let that = this;            $.get("./src/static/datas.json",function(data){                for(let i = 0; i < data.length; i++){                    that.listDatas.push(data[i])                };                alert(that.listDatas.length)//只有在这个作用域下才能访问到新的数据            });            alert(that.listDatas.length)//在这里访问就又变成了初始的值        },        mounted:function() {            alert(this.listDatas) //弹出的是初始值22,22;并不是ajax获取的值        },        components:{            classTitleTab,            comboListTab        },            }</script>

解决方案

发现有个别错别字

个人认为
1.视图更新了其实说明computed已经有重新计算过了
2.mounted访问不到获取后的值应该是因为还没有获取完成(vue生命周期,created是数据绑定完成时,mounted是dom元素加载完成时,这时候不代表ajax部分已返回)
3.你写的那两个alert后者为什么无效,我认为也是由于异步的问题(题主可以好好想想)
个人建议
1.vue已经算是弃vue-resource而拥抱axios了,代码可以改动一下
2.大部分代码风格可以切换到es6语法甚至一些es7的语法,比如,箭头函数来避免作用域的问题(如你在代码里面出现的that就是为了作用域吧),其次就是关于数组的操作,比如排序用sort(),遍历用forEach()
3.vue官网文档真的很友好很齐全~
4.额外:如果项目大或者想全面学习vue,也可以考虑加入vuex

以上供参考,有错误也欢迎指出一起探讨~