Highcharts-Vue 图表选项设置后不改变值答案

【问题标题】：Highcharts-Vue chart options does not change values after it is setHighcharts-Vue 图表选项设置后不改变值
【发布时间】：2020-06-29 00:44:38
【问题描述】：

我正在使用 highcharts-vue 在我的 Vue 项目中使用 Highcharts。

A)首先，在 javascript 中以下工作

let b =5;
let data = {
    a:b
}
console.log('data', data.a);

Log 说 5，b 的值

在 Vue 和 highcharts 中，我尝试使用相同的逻辑。在 vue 模板中设置 highcharts，首先将其选项设置为空，然后尝试将数字赋予系列。模板是 <highcharts ref="chart" :callback="chartcallback" :options="options" ></highcharts>

然后使用Vue

B) 将变量设置为空数组，将它们传递给选项并使用这些变量来更新 vue 中的选项

    data(){
      return{     
        series:[],  
        options: {  
          series: this.series,
       }
     }
   }

然后，在 Vue 中，如果我这样做了

console.log(this.options.series);
     this.series.push({ 
          name:'hello',
          data:[]
      });
console.log(this.options.series);

将 options.series 设置为 var，更改 var 并且 options.series 也会更改。第一个日志显示undefined，第二个是一个空数组，但我只是将名称和数据推入其中。这让我感到困惑，因为它就像 A)，在 javascript 中是有效的。在这里它没有。是因为 Vue 还是 Highcharts？

我尝试的另一种方法是

C)设置options为空，设置vars，等于vars的options

    data(){
      return{      
        options: {  
          series: [],
       }
     }
   }

然后，在 Vue 中，如果我这样做了

console.log(this.options.series);
     this.series.push({ 
          name:'hello',
          data:[]
      });
     this.options.series = this.series
console.log(this.options.series);

这行得通，但我不明白为什么。第一个日志是一个空数组，第二个日志有名称和数据。如果设置选项然后设置一个等于它的var，为什么B）不起作用？我还将 var 设置为 options ，但时间不同。

拜托，我想了解为什么看起来像 A 的 B 不起作用。还有为什么 C 可以工作，因为我在创建选项后将 options.series 设置为 var

谢谢

【问题讨论】：

标签： javascript vue.js highcharts

【解决方案1】：

我认为这是一个 Javascript 范围“问题”，在示例 B）中，您运行 console.log(this.options.series) 并从选项中记录系列，但您仅将方法推送调用到 this.series，您处于不同的范围内。

在 C) 尝试中，您有 2 个不同的范围，但比您运行 this.options.series = this.series，这就是它当时有效的原因。

【讨论】：

【解决方案2】：

在 Vue 和 highcharts 中，我尝试使用相同的逻辑。

不是真的，我会尽量解释清楚。这样做：

    data(){
      return{     
        series:[],  
        options: {  
          series: this.series,
       }
     }
   }

它不像你期望的那样工作，因为当引用this.series 时，该数组实际上还没有在组件中定义。原因是Vue在返回一个完整的data对象后才定义所有组件数据，所以你不应该使用this来引用data定义中的其他组件数据。

第二种情况：

    data(){
      return{      
        options: {  
          series: []
       }
     }
   }

console.log(this.options.series);
this.series.push({ 
  name:'hello',
  data:[]
});
this.options.series = this.series
console.log(this.options.series);

第一个日志返回一个空数组，因为您可以看到它是在 init 中定义的。之后，您将新对象推入this.series 数组（我怀疑它在您的组件数据中定义为空数组），然后将其分配给options.series，这是完全正确的。

我希望这个描述对你来说足够明亮。

【讨论】：