Highcharts- Vue параметры графика не изменяют значения после его установки

Question

Я использую highcharts- vue, чтобы иметь Highcharts в моем Vue проекте.

A) Прежде всего, в javascript следующие работы

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

В журнале написано 5, значение b

В Vue и старшие чарты Я стараюсь иметь одинаковые логики c. Установите старшие диаграммы в шаблоне vue, сначала установите его параметры пустыми, затем попытайтесь присвоить номера сериям. Шаблон <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) установить опции как пустые, установить переменные, равные опции переменным

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

Это работает, но я не понимаю, почему. Первый журнал - это пустой массив, второй журнал имеет имя и данные. Если настройка параметров, а затем установка переменной, равной ей, почему B) не работает? Я также установил переменную для параметров, но в другое время.

Пожалуйста, я хочу понять, почему B, который выглядит как A, не работает. Также почему C работает, так как я устанавливаю options.series для var, после того, как параметры созданы

Спасибо

Answer 1

Я думаю, что это проблема Javascript scope, в примере B) вы запускаете console.log(this.options.series) и регистрируете ряды из опций, но вы вызываете метод pu sh только для this.series, вы используете другой scopes.

При C) попытка у вас была 2 разных прицела, но чем вы запустили this.options.series = this.series, поэтому он работает в этот раз.

Answer 2

В Vue и старших чартах я стараюсь иметь одинаковые логики c.

Не совсем, и я постараюсь объяснить это как можно яснее. Делаем это:

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

Это не работает так, как вы ожидаете, потому что при ссылке this.series этот массив на самом деле еще не определен в компоненте. Причина в том, что Vue определяет все данные компонента только после возврата всего объекта data, поэтому вы не должны использовать this для ссылки на другие данные компонента в определении data.

Во втором case:

    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, что совершенно правильно.

I надеюсь, что это описание достаточно украсит вас.