Вызов функции из data ()

Я новичок в vue.js 2. В настоящее время я воссоздаю этот график внутри с помощью инфраструктуры vue: https://codepen.io/apexcharts/pen/rqWeBX

Мне нужно получить некоторые данные из функции generateDayWiseTimeSeries (). В настоящее время я вызываю его из DATA (), и это приводит меня к этой ошибке:

[Vue warn]: Error in data(): "ReferenceError: generateDayWiseTimeSeries is not defined"

Я пробовал возвращать данные с синтаксисом .this и помещать функцию внутри созданной: части, но безуспешно.

Это мой код vue.js, я был бы признателен, если бы вы сказали мне, правильный ли это способ сделать.

Vue.component("apexchart", VueApexCharts);

const Dashboard = {
  data: function() {
    return {
     series_5: [
        generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
          min: 30,
          max: 90
        })
      ]
    };
  },
  components: {
    apexcharts: VueApexCharts
  },
  methods: {
    generateDayWiseTimeSeries: function(baseval, count, yrange) {
      var i = 0;
      var series = [];
      while (i < count) {
        var x = baseval;
        var y =
          Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
          yrange.min;

        series.push([x, y]);
        baseval += 86400000;
        i++;
      }
      return series;
    }
    },
  ,
  template: `
    // THE TEMPLATE IS USELESS FOR THIS PROBLEM
   <div class="container">

        <div class="row" > 
            <div class="col-sm col-xs-12">
                    <div  class="card " style ="margin-bottom : 20px"  >

                        <div class="card-body">
                            <h5 class="card-title">Indices de ventes</h5>
                            <p class="card-text">Ventes totales .</p>
                            <div><apexchart  type="bar" :options="options_1" :series="series_1"></apexchart></div>
                        </div>
                    </div>
               </div>
                <div class="col-sm col-xs-12">

                                <div  class="card " style ="margin-bottom : 20px"  >

                        <div class="card-body">
                            <h5 class="card-title">Ventes</h5>
                            <p class="card-text">Indice des ventes total.</p>
                           <div><apexchart type="line" :options="options_2" :series="series_2"></apexchart></div>
                        </div>
                    </div>
                </div>



         </div> // THE TEMPLATE IS USELESS FOR THIS PROBLEM

`
};

РЕДАКТИРОВАТЬ: изменено

series_5: [
        this.generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
          min: 30,
          max: 90
        })
      ]

А теперь вроде заработало!


vue.js apexcharts
person harmonius cool    schedule 23.10.2019    source источник
comment
ваше редактирование изменило ошибку? это работает сейчас?   -  person DanStarns    schedule 23.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вашу проблему можно решить, добавив this к вашему звонку в generateDayWiseTimeSeries().

series_5: [
  this.generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, { min: 30, max: 90 })
]

Он не объявлен как глобальная функция, поэтому вам необходимо указать контекст при ее вызове.

При этом похоже, что вы ищете вычисляемое свойство. Измените свой JavaScript следующим образом:

const Dashboard = {
  data: function() {
    return {};
  },
  components: {
    apexcharts: VueApexCharts
  },
  computed: {
    series_5() {
      return this.generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, { min: 30, max: 90 });
    }
  },
  methods: {
    generateDayWiseTimeSeries: function(baseval, count, yrange) {
      var i = 0;
      var series = [];
      while (i < count) {
        var x = baseval;
        var y =
          Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
          yrange.min;

        series.push([x, y]);
        baseval += 86400000;
        i++;
      }
      return series;
    }
    },
  ,

  ...

}

В общем, логика не принадлежит функции data(). По соглашению data() просто возвращает объект JSON, представляющий данные экземпляра Vue.

person Vince    schedule 23.10.2019