Vue修改了对象的属性,数据已修改但是UI渲染无效,Vue.set、splice各种方法都试了无效,求解~~
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
目标是从服务器拉取返回的ret数组,替换组件option模板中的data重新渲染一个图表,试了各种方法都无效,求大神指点~~~~~
以下是组件中的script部分:
<script>
import Vue from 'vue'
export default {
name: 'FlagCpt',
data () {
return {
option: {
color: ['rgba(251,114,147,0.6)', 'rgba(55,162,218,0.6)', 'rgba(255,165,0,0.6)', 'rgba(15,204,139,0.6)'],
series: [
{
type: 'pie',
data: [
{ name: '可口可乐', value: 93 },
{ name: '百事可乐', value: 32 },
{ name: '哇哈哈', value: 65 },
{ name: '康师傅', value: 44 },
{ name: '统一', value: 52 }
],
radius: ['20%', '45%'],
insideLabel: {
show: true
},
outsideLabel: {
formatter: (dataItem) => (dataItem.name + dataItem.value)
}
// roseType: true
}
]
}
}
},
async mounted () {
const { data } = await Vue.axios.get('/vul/api/xxx')
let ret = data.ret
this.$set(this.option.series[0], 'data', ret) // 这样写无效,这里应该怎么写?
this.$forceUpdate() //无效
}
}
</script>