javascript - 如何在回调中停止无限递归

Question

我一直在试图理解为什么以及如何修复legendCallbackVue 的 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 循环，即只返回预期的字符串，它就可以正常工作。

标签： javascriptrecursionvue.jsvuejs2vue-chartjs

Answer 1

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

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