vue使用echart图数据渲染不出来引发的思考(Vue 不能检测对象属性的添加或删除)

今天在使用echart柱状图时,发现渲染不出数据,而我在控制台可以看到数据已经异步请求获取了。

vue使用echart图数据渲染不出来引发的思考(Vue 不能检测对象属性的添加或删除)_第1张图片

数据请求代码如下:

    getHistoryChartData:function() {
      const params = {
        project: this.selected_project_id
      }
      getHistorytaskchart(params).then(response => {
        this.chartData.previous_data = response.data.previous_data
        this.chartData.current_data = response.data.current_data
      }).catch(err => {
        console.error(err)
      })
    }

实例属性chartData定义如下:

vue使用echart图数据渲染不出来引发的思考(Vue 不能检测对象属性的添加或删除)_第2张图片

箭头部分就是导致echart柱状图渲染不出的原因,定义chartData时未定义其属性previous_data和current_data,

而我在数据请求的方法中又给这两个属性赋值

参考文档发现,由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

因此问题解决办法有两种:

  1. data:function() {
        return {
          chartData: {
            previous_data:[],
            current_data:[]
          }
        }
    }

    定义根实例对象属性时也将该对象的previous_data和current_data定义好,如上图

  2. 使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

      getHistoryChartData:function() {
            const params = {
              project: this.selected_project_id
            }
            getHistorytaskchart(params).then(response => {
              Vue.set(this.chartData, 'previous_data',  response.data.previous_data)
              Vue.set(this.chartData, 'current_data',  response.data.current_data)
              // this.chartData.previous_data = response.data.previous_data
              // this.chartData.current_data = response.data.current_data
            }).catch(err => {
              console.error(err)
            })
          }

     

  3. 可以使用Object.assign() 或 _.extend()赋值多个对象属性。这里我们应该使用两个对象赋值到一个空对象。使用Object.assign()合并this.chartData和response.data到一个空对象,再将返回的新对象赋值给this.chartData,这样的赋值操作Vue可以检测到,从而响应页面视图的变化。

    getHistoryChartData:function() {
          const params = {
            project: this.selected_project_id
          }
          getHistorytaskchart(params).then(response => {
            // Vue.set(this.chartData, 'previous_data', response.data.previous_data)
            // Vue.set(this.chartData, 'current_data', response.data.current_data)
            this.chartData = Object.assign({}, this.chartData, response.data)
            // this.chartData.previous_data = response.data.previous_data
            // this.chartData.current_data = response.data.current_data
          }).catch(err => {
            console.error(err)
          })
        }

    至此问题便解决了vue使用echart图数据渲染不出来引发的思考(Vue 不能检测对象属性的添加或删除)_第3张图片

你可能感兴趣的:(vue,echart未渲染,对象变更检测,Vue.set,数据显示)