Vue修改了对象的属性,数据已修改但是UI渲染无效,Vue.set、splice各种方法都试了无效,求解~~
发布于 3 年前 作者 ab8512 869 次浏览 来自 问答
粉丝福利 : 关注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>
回到顶部