Question

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

2020-03-25

1464

vue.js vuejs2

我试图通过调用 Vue js 中 methods 属性中的函数来填充在 data 属性中声明的数组。代码如下：

<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 warn]: Error in mounted hook: "TypeError: Cannot read property 'chartData' of undefined"

那么我怎样才能将标签数组（chatData 内）的长度填充为 0 以达到数据数组（datasets 内）的长度呢？

我正在寻求您的帮助。提前致谢。

Answer 1

这是因为您的 map 函数内的函数将丢失 this 上下文。因此它变得未定义。

要解决此问题，请使用 map 内的箭头函数。

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

这将解决问题

Answer 2

只需要将 this 引入到您的 fillLabel 方法中，如下所示：我尝试了这个解决方案，它解决了问题

fillLabel() {
            let th = this;
            th.chartData.datasets[0].data.map(function (key,value) {
                th.chartData.labels.push(key);
            })
            alert(th.chartData.labels)

        },