Как исправить ошибку «updateSeries is not a function» в vue-apexcharts?

Question

[Артём]

Переносил API для графика apexchart через axios и выдает ошибку

Uncaught (in promise) TypeError: chart.updateSeries is not a function
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/TheChart.vue?vue&type=script&lang=js:42:13)

Все делал как в инструкции, но выдает это, подскажите почему?

import VueApexCharts from "vue3-apexcharts";
import axios from 'axios';

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function() {

    return {
      chartOptions: {
        chartapex: {
          id: "vuechart-example",
        },
        chart: {
          height: 350,
          type: 'bar',
        },

        title: {
          text: 'Ajax Example',
        },
        noData: {
          text: 'Loading...'
        },
        dataLabels: {
          enabled: false
        },
      },
      series: [],
    };
  },
  mounted() {
    var url = 'http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';
    var chart = document.querySelector('.chart')


    axios({
      method: 'GET',
      url: url,
    }).then(function(response) {
      chart.updateSeries([{
        name: 'Sales',
        data: response.data
      }])
    })

  }
};

Answer 1

[0xD34F]

Все делал как в инструкции

Ни в одной инструкции показанного вами быть не могло.

var chart = document.querySelector('.chart')

Раз вы до такого додумались, значит vue вообще не знаете. Необходимости работать с DOM-узлами напрямую в большинстве случаев нет, а когда есть, для их получения vue предоставляет собственные инструменты. Может, всё-таки откроете документацию?

.then(function(response) {
  chart.updateSeries([{
    name: 'Sales',
    data: response.data
  }])
})

Откуда методу updateSeries взяться у html-элемента? Он есть у экземпляра ApexCharts. Который вам трогать не надо, вместо дёрганья updateSeries напрямую, следует обновить сами данные:

.then(response => {
  this.series = [
    {
      name: 'Sales',
      data: response.data,
    },
  ];
});

Comments

[Артём]

извиняюсь за свою нубость, но да я реально не знаю vue, я в нем новенький тока, учусь , в документации самого apexchart там о такой инфе не было сказано, хотя, возможно это потому что там было для обычного кода а не для vue, спасибо за помощь