如何停止回调中的无限递归

Question

我一直在尝试理解为什么以及如何修复 legendCallback Vue 的 Vue 图表中发生的这种无限递归，但无济于事。非常感谢帮助。

在我的 Vue 组件中，选项在方法中定义为：

  options() {
                var self = this;
                 return {
                    legend: {
                        display: false,
                        position: 'top',
                    },
                    legendCallback: chart=> {
                        return this.generateLegendData(chart)
                    },
                    tooltips: {
                        mode: 'single',
                        callbacks: {
                            label: function (tooltipItems) {
                                return "text"
                            }
                        },
                    }
                }
            },

我的 generateLegendData 方法如下所示：

        generateLegendData(chart) {
          var labels = ["SolarCity", "Einstein", "SpaceX", "Mars", "Tesla"];
          var backgroundColor = [
            "rgba(242,58,48, 0.1)",
            "rgba(110,75,63,1)",
            "rgba(55,72,172,1)",
            "rgba(0,39,39,1)",
            "rgba(166,176,69,1)"
          ];

          var text = [];
          text.push('<ul class="' + chart.id + '-legend">');
          for (var i = 0; i < labels.length; i++) {
            text.push(
              '<li><span style="background-color:' + backgroundColor[i] + '">'
            );
            if (labels[i]) {
              text.push(labels[i]);
              console.log(labels[i]);
            }
            text.push("</span></li>");
          }
          text.push("</ul>");

          return text.join("");
        }

没有 for 循环，即只返回预期的字符串，它工作正常。

Answer 1

返回 return text.join("") 不是问题。

解决方案是将 options 属性 从方法移动到计算 属性。