Question

我正在使用Bootstrap Vue显示进度条。 HTML部分如下：

<b-progress :value="getOverallScore" :max=5 variant="primary" animated></b-progress>

getOverallScore是一个计算函数。它返回三个不同分数的平均值。

    computed: {
    getOverallScore: function () {
        var i;
        var sum = 0;

        for (i = 0; i < this.items.length; i++) {
            sum = sum + this.items[i].score;
        }
        return Number.parseFloat(sum / this.items.length).toFixed(2);
    },


}

当我使用<h5>Overall scores: {{ getOverallScore }}</h5>测试输出时，它可以正常工作，但是进度条无法从函数中获取值。有什么想法吗？

谢谢。

Answer 1

您确定自己在正确的范围内吗？

也许您的值范围是[0,100]，期望值范围是[0.0,1.0]。

Answer 2

好的，我通过将计算值更改为以下内容来解决此问题：

    computed: {
    getOverallScore: function () {
        var i;
        var sum = 0;

        // Will get all reviews through API calls
        for (i = 0; i < this.items.length; i++) {
            sum = sum + this.items[i].score;
        }

        this.average = Number.parseFloat(sum / this.items.length).toFixed(2);

        return Number.parseFloat(sum / this.items.length);
    },


}

显然，当我使用.toFixed(2)时，b-progress不再将值识别为数字，而是字符串。我尝试使用Number(this.average)进行转换，但返回结果仍然无效。不过，我发现这很奇怪，因为toFixed函数是内置库的一部分，并且以某种方式不能将其识别为函数。输出值很好，因此toFixed函数可以正常工作。不知道为什么会这么做。

Bootstrap Vue进度栏无法从功能中获取其值

2 个答案: