时间戳

首页 > 解决方案 > 如何通过调用Vue js中的方法来填充数组？

vue.js - 如何通过调用Vue js中的方法来填充数组？

问题描述

我正在尝试通过在 Vue js 中调用方法属性中的函数来填充在数据属性中声明的数组。这是代码：

<script>
export default {
  extends: Bar,
  mounted() {
    this.renderChart(this.chartData, this.options);
    this.fillLabel();
  },
  data() {
    return {
      chartData: {
        labels:[],
        datasets: [
          {
            label: "Users",
            data: [40,20,12,39,10,40]
          }
        ]
      },

    };
  },
  methods: {
    fillLabel() {
      this.chartData.datasets[0].data.map(function (key,value) {
          this.chartData.labels.push(key);
      })

    }
  }
};
</script>

但这给了我控制台中的以下错误：

[Vue 警告]：挂载钩子中的错误：“TypeError：无法读取未定义的属性 'chartData'”

那么如何将标签数组（chatData 内）填充为 0 到数据数组（数据集内）的长度。

我正在寻找你的帮助。提前致谢。

标签： vue.jsvuejs2

解决方案

这是因为 map 函数中的函数会丢失this上下文。所以它变得不确定。

要解决此问题，请在地图内使用箭头功能。

this.chartData.datasets[0].data.map((key,value)=> { this.chartData.labels.push(key); })

这将解决问题

推荐阅读