当使用索引直接赋值和直接修改数组长度时，Vue不能检测出变动的数组。
这样写页面显示的是共0个
<span class="pull-right">已全部加载，共{{fileDatas.length}} 个</span>
js:
export default {data() {return {fileDatas: []}},created() {this.getData();},methods: {getData() {var that = thisvar api ='/api/directory/null';console.log('api:' + api)that.$axios.get(api).then((res) => {console.log('data' + JSON.stringify(res.data.data))var i =0for (i=0;i<res.data.data[0].children.length;i++){that.fileDatas[i] = res.data.data[0].children[i]}console.log('that.fileDatas##' + that.fileDatas.length)console.log('that.fileDatas = ' + JSON.stringify(that.fileDatas))})}}
getData方法要改成下面的，给数组赋值要写成this.$set()，出现的结果是正确的。
methods: {getData() {var that = thisvar api ='/api/directory/null';console.log('api:' + api)that.$axios.get(api).then((res) => {console.log('data' + JSON.stringify(res.data.data))var i =0for (i=0;i<res.data.data[0].children.length;i++){ this.$set(this.fileDatas,i,res.data.data[0].children[i])console.log('this.fileDates+++' + JSON.stringify(this.fileDatas))}console.log('that.fileDatas##' + that.fileDatas.length)})},}
如果是对象数组可以在for循环中定义一个对象赋给数组
for (i=0;i<res.data.data[0].children.length;i++){var obj = new Object()obj.id = res.data.data[0].children[i].idobj.name = res.data.data[0].children[i].nameobj.size = res.data.data[0].children[i].sizeobj.checked = falseobj.iconStyle = 'fa fa-folder slot-t-top-button'obj.createTime = res.data.data[0].children[i].createTimeconsole.log('obj===' + JSON.stringify(obj))this.$set(this.fileDatas,i,obj)console.log('this.fileDates+++' + JSON.stringify(this.fileDatas))}
作为笔记使用，借鉴 /article/126756.htm
关于vue set 的使用可以借鉴 /qq_30455841/article/details/78666571
如果觉得《解决Vue数组更新不渲染的问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
