Vue渲染Json异常,返回数据正确,但是不显示Json数据结果,怎么回事?返回的status为200,但是前端页面不显示一点数据,如下图:
文章图片
下面是该Vue渲染Json的代码:
<
template>
<
div class="result" >
<
divv-bind:style="{ color: `${msg.font_color}`}">
<
p>{{msg.info_text}}<
/p>
<
/div>
<
p> {{msg.rate_adult}}<
/p>
<
img :src="http://www.srcmini.com/static/dst/${msg.file_name}`)">
<
p>{{msg.part_name}} : {{msg.rate_part}}<
/p>
<
/div>
<
/template>
<
script>
import axios from 'axios';
export default {
data() {
return{
msg: ""
}
},
methods:{
async created() {
try {
let response = await axios.get('http://localhost:5000/process')
this.msg = response.data
this.msg.$forceUpdate()
} catch (err) {
// eslint-disable-next-line
console.log(err)
}
}
},
};
<
/script>
<
style scoped>
<
/style>
分析和解决问题
【Vue渲染Json异常(返回正确,但不显示Json数据结果)】在上面的代码中,应该使用this.$forceUpdate(); 而不是this.msg.$forceUpdate(),第二个问题是,应该将created()写在methods的外面,正确代码如下:
<
template>
<
div class="result" >
<
divv-bind:style="{ color: `${msg.font_color}`}">
<
p>{{msg.info_text}}<
/p>
<
/div>
<
p> {{msg.rate_adult}}<
/p>
<
img :src="http://www.srcmini.com/static/dst/${msg.file_name}`)">
<
p>{{msg.part_name}} : {{msg.rate_part}}<
/p>
<
/div>
<
/template>
<
script>
import axios from 'axios';
export default {
data() {
return{
msg: ""
}
},
methods:{},
async created() {
try {
let response = await axios.get('http://localhost:5000/process')
if(response){
this.msg = response.data
this.$forceUpdate();
}
} catch (err) {
// eslint-disable-next-line
console.log(err)
}
}
};
<
/script>
<
style scoped>
<
/style>
推荐阅读
- Vue中如何实现多个选择表单元素互相独立()
- vue cli已经有新版本了,如何更新vue cli到新版本()
- javascript项目使用async报错(regeneratorRuntime is not defined)
- JavaScript如何在forEach中使用async和await(forEach和async、await的结合使用)
- 解决React构建错误(ERROR Module build failed (from .node_modules babel-loader lib index.js))
- Vue-cli 3新建项目报错(ERRORcommand failed npm install –loglevel error —— 解决办法)
- 诺基亚实习面试|诺基亚在校园
- Python中的First Class函数介绍和用法
- 算法设计(最长剩余时间优先(LRTF)CPU调度程序)