vue渲染的问题Json返回良好，但不显示

Question

Vue渲染问题后端接收到200ok信号，但前端页面没有显示任何结果。

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)
}
}
},
};

我尝试了很多方法，比如强制异步更新渲染，但结果仍然是一样的。

Answer 1

使用this.$forceUpdate();而不是this.msg.$forceUpdate()，并在方法外写入created((。

<template>
<div class="result" >
<div  v-bind:style="{ color: `${msg.font_color}`}">
<p>{{msg.info_text}}</p>
</div>
<p> {{msg.rate_adult}}</p>
<img :src="require(`../../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>