Vue.js 从data（）调用函数

我是vue.js2的新手。我目前正在使用vue框架内部重新创建此图：

我需要从generateDayWiseTimeSeries（）函数中获取一些数据。 我当前正在从DATA（）调用它，它会导致以下错误：

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

我尝试了使用.this语法返回数据，并将函数放在created:part中，但没有成功

这是我的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

`
};

---

现在它似乎在工作

您的问题可以通过在对

generatedaywisetimeries（）

的调用中添加

this

来解决

系列5：[
这个.generateDayWiseTimeSeries（新日期（“2017年4月22日”）.getTime（），115，{min:30，max:90}）
]

它没有声明为全局函数，因此在调用它时需要提供上下文

---

也就是说，看起来你要找的是一个。按如下方式修改JavaScript：

const仪表板={
数据：函数（）{
返回{}；
},
组成部分：{
apexcharts:VueAppExcharts
},
计算：{
系列_5（）{
返回这个.generateDayWiseTimeSeries（新日期（“2017年4月22日”）.getTime（），115，{min:30，max:90}）；
}
},
方法：{
generateDayWiseTimeSeries:函数（baseval、count、yrange）{
var i=0；
var系列=[]；
而（我<计数）{
var x=baseval；
变量y=
Math.floor（Math.random（）*（yrange.max-yrange.min+1））+
yrange.min；
系列推送（[x，y]）；
baseval+=86400000；
i++；
}
返回序列；
}
},
,
...
}

---

通常，逻辑不属于

data（）

函数。按照惯例，

data（）

只返回一个表示Vue实例数据的JSON对象。

您的问题可以通过将

此

添加到调用

generateDayWiseTimeSeries（）

来解决

系列5：[
这个.generateDayWiseTimeSeries（新日期（“2017年4月22日”）.getTime（），115，{min:30，max:90}）
]

它没有声明为全局函数，因此在调用它时需要提供上下文

---

也就是说，看起来你要找的是一个。按如下方式修改JavaScript：

const仪表板={
数据：函数（）{
返回{}；
},
组成部分：{
apexcharts:VueAppExcharts
},
计算：{
系列_5（）{
返回这个.generateDayWiseTimeSeries（新日期（“2017年4月22日”）.getTime（），115，{min:30，max:90}）；
}
},
方法：{
generateDayWiseTimeSeries:函数（baseval、count、yrange）{
var i=0；
var系列=[]；
而（我<计数）{
var x=baseval；
变量y=
Math.floor（Math.random（）*（yrange.max-yrange.min+1））+
yrange.min；
系列推送（[x，y]）；
baseval+=86400000；
i++；
}
返回序列；
}
},
,
...
}

---

通常，逻辑不属于

data（）

函数。按照惯例，

data（）

只返回一个表示Vue实例数据的JSON对象。

您的编辑更改了错误？现在可以工作了吗？您的编辑更改了错误？现在可以用了吗？

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