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
以上供参考,有错误也欢迎指出一起探讨~