В Vue JS назначьте данные из смонтированного () - PullRequest
Новая
       46

В Vue JS назначьте данные из смонтированного ()

0 голосов
/ 28 января 2020

Я пытаюсь создать High-Chart внутри данных () и из смонтированного () Попытка присвоить серии для High-Chart . но я не смог назначить series from mount () . Было бы очень полезно, если бы кто-то мог помочь мне в этом вопросе. Я хочу поместить данные в Highchart series из vue js mount () . 

data () {
    return {

        colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'],

        chartOptions: {
        chart: {
            type: 'column',
            scrollablePlotArea: {
                minWidth: 700,
                scrollPositionX: 1
            }
        },

        title: {
            text: 'Balance Sheet'
        },

        xAxis: {
            categories: [
                '2019年1月', '2019年2月', '2019年3月', '2019年4月', '2019年5月', '2019年6月', 
                '2019年7月', '2019年8月', '2019年9月', '2019年10月', '2019年11月', '2019年12月',
                '2020年1月', '2020年2月', '2020年3月', '2020年4月', '2020年5月', '2020年6月', 
                '2020年7月', '2020年8月', '2020年9月', '2020年10月', '2020年11月', '2020年12月',
                '2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月', '2021年6月', 
                '2021年7月', '2021年8月', '2021年9月', '2021年10月', '2021年11月', '2021年12月'
            ],
            labels: {
                overflow: 'justify'
            }
        },

        yAxis: {
            tickWidth: 1,
            title: {
                text: 'Wind speed (m/s)'
            },
            lineWidth: 1,
            opposite: true
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
            shared: true,
            split: true // Tooltip comment
        },

        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },

            series: []
        }
    }
},

methods: {
    setSeries() {
        this.$setData(function() {
            this.chartOptions.series[1] = this.bsData[100000000];
        });
    }
}

mounted () {
    this.setSeries();
}

Я просто новичок в Vue. js и поэтому не умею объяснять.

1 Ответ

0 голосов
/ 28 января 2020

Это просто. Вам нужно использовать функцию стрелки внутри смонтированного. Область действия указателя this теряется при использовании обычного function. 

methods: {
    setSeries() {
        // Note the use of arrow function
        this.$setData(() => {
            this.chartOptions.series[1] = this.bsData[100000000];
        });
    }
}

В качестве альтернативы, если вы не хотите использовать функцию стрелки, сохраняйте ссылку на указатель this, используя замыкание: 

methods: {
    setSeries() {
        // Maintain the closure
        const vm = this;

        this.$setData(function () {
            vm.chartOptions.series[1] = vm.bsData[100000000];
        });
    }
}

Далее, есть еще две проблемы с вашим кодом. Метод $setData не существует в Vue. js. Вам необходимо использовать метод $set, как указано здесь . Ваш код будет выглядеть следующим образом: 

methods: {
    setSeries() {

        this.$set(() => {
            this.chartOptions.series[1] = this.bsData[100000000];
        });
    }
}

Далее вам не нужно напрямую использовать метод $set. Он предназначен для использования в угловых случаях. Vue. js обнаруживает изменения автоматически с помощью геттеров и сеттеров . Подробнее об обнаружении изменения массива * 1024 можно прочитать здесь . Для массива вы должны использовать упакованные методы или каждый раз создавать новый массив.

Таким образом, ваше окончательное решение будет выглядеть примерно так: 

methods: {
    setSeries() {
        // Updating array data structure by creating new array instead of updating array by index.
        this.chartOptions.series = [this.chartOptions.series[0], this.bsData[100000000]];
    }
}

В итоге вам нужно сделать три вещи:

  1. Используйте функцию стрелки для поддержки ссылки this.
  2. Не используйте $set для изменения Vue данных экземпляра.
  3. Не изменяйте массив напрямую с помощью индекса , Используйте такие методы, как concat, упакованные методы, такие как push, pop, et c. или де-структурирование для создания нового массива.
...