最近用vue + node.js在做一个小新闻模块，写完后端用Apifox测试后端正常，然后开始着手写前端，准备用vue + axios接收后端传递的数据 经console.log之后后端的数据完整的被接收到，并根据三个属性分别封装到了三个数组中了。
后端发送的数据：
打印一下前端：
如上图 数据接收上一切正常 控制台也并未报错 但是页面上什么都没有 说明vue并没有将数据渲染上去
一开始以为自己v-for用错了，查阅了相关文档没有发现问题。
最后发现 在v-for循环中，如果我们在函数中改变了数组中的值，在console.log()中查看虽然是修改成功了，但在页面中没有及时刷新改变后的值。
解决方案：
在mounted中添加一个 ***this.$forceUpdate();*** 方法。强制使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
附上最终效果图：
附上前端源码
<html>
<head>
<title>
新闻模块尝试
</title>
<meta charset="UTF-8">
<style>
.bodyM {
margin-left: 320px;
width: 300px;
height: 420px;
background-color:blueviolet;
}
/* body {
background-color: aquamarine;
} */
.divF {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<template v-if="allDraw.length != 0">
<span v-for="(it,i) in allDraw">
{{it}}
<template v-if="(i + 1) % 3 != 0 || i == 0">
,
</template>
<template v-if="(i + 1) % 3 == 0 && i != 0">
<br/>
</template>
</span>
</template>
</div>
</body>
<script src="./axios/axios.js"></script>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
ceshi: "sss",
allResult : [],
allTimes: [],
allWheres: [],
allBodys: [],
allDraw: []
}
},
mounted(){
let _this = this;
axios({
method:"post",
url:"http://127.0.0.1:9876/api/news"
}).then((res)=>{
_this.allResult = res.data;
for (let i in _this.allResult){
console.log(_this.allResult[i].timestart+","+_this.allResult[i].wherestart+","+_this.allResult[i].bodycontent)
}
for (let i in _this.allResult){
_this.allTimes[i] = _this.allResult[i].timestart;
// console.log(_this.allTimes[i]);
}
for (let i in _this.allResult){
_this.allWheres[i] = _this.allResult[i].wherestart;
}
for (let i in _this.allResult){
_this.allBodys[i] = _this.allResult[i].bodycontent;
}
console.log(_this.allTimes.length);
for (let i in _this.allResult){
_this.allDraw.push(_this.allTimes[i]);
_this.allDraw.push(_this.allWheres[i]);
_this.allDraw.push(_this.allBodys[i]);
}
this.$forceUpdate();
})
},
})
</script>
</html>
（不过之前运用v-for并未出现这种bug，今天也是第一次遇到这种bug，希望能帮到同样问题的朋友们。）
