The value of the progress bar in Bootstrap Vue cannot be retrieved using a function

I have implemented a progress bar using Bootstrap Vue. Here is the HTML code:

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

The getOverallScore function calculates an average value based on three different scores.

    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);
    },


}

While testing with 

<h5>Overall scores: {{ getOverallScore }}</h5>
, the function works fine, but the progress bar does not fetch the value from it. Any suggestions?

Thanks!

javascriptvue.jsbootstrap-vue

Answer №1

Are you certain your numbers fall within the correct range?

It's possible that your values should be between [0,100], while the expected value should range from [0.0,1.0].

Answer №2

After making some adjustments, I managed to solve the issue by modifying the computed code as shown below:

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

        // Retrieving all reviews via 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);
    },


}

It seems that using .toFixed(2) caused the b-progress component to interpret the value as a string instead of a number. Even after attempting to convert it back using Number(this.average), the issue persisted. It's perplexing how the built-in toFixed function is not recognized as such by the component. Despite this confusion, the output value remains accurate, indicating that the toFixed functionality is working correctly. The reason behind this behavior remains unknown.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

convert a JSON object to an array using jQuery

Can anyone help me with converting an object into an array using jQuery? [["20"],["30"],["45"],["54"],["33"],["15"],["54"],["41"]] I am looking to achieve an array output like this: [20,30,45,54,33,15,54,41] Any suggestions on how to accomplish this? ...

javascriptjqueryarraysjson

collaborating with numerous JavaScripts

I am currently working on a project that involves several JavaScript functionalities such as an image viewer, carousel, and toggles. Now, I need to implement a pop-up form, but when I add the JavaScript for the pop-up, the entire page stops working. I wou ...

javascriptjquery

Tips for using a .map() function in conjunction with a promise

I am faced with a challenge where I have an array and for each element in the array, I need to retrieve some data based on that element and then append it to the respective element in the array. For illustration purposes, I will create a simulated fetch o ...

javascriptpromisees6-promisemap-function

What is the best way to remove all attributes from one interface when comparing to another?

Consider the following two interfaces: interface A { a: number; b: string; } interface B { b: string; } I am interested in creating a new type that includes all the keys from interface A, but excludes any keys that are also present in interface B. ...

javascripttypescript

Error: Babel configuration file not found

I've been working on a Vue project, but I encountered an issue right after creating it. When trying to build my project, I keep getting a parsing error: No Babel config file detected for C:\\HotelManagmet\clienthotel\babel.config. ...

node.jsvue.jsvuejs2

In a designated paragraph, set the display of all <span> elements to none using JavaScript

I have a long paragraph with over 10,000 lines of text and I need a way to quickly remove all the lines without hiding the entire paragraph. Specifically, I want to hide each line individually by changing the span style from "display:block" to "display:non ...

javascripthtml

Is there an Angular counterpart to Vue's <slot/> feature?

Illustration: Main component: <div> Greetings <slot/>! </div> Subordinate Component: <div> Planet </div> Application component: <Main> <Subordinate/> </Main> Result: Greetings Planet! ...

javascriptangularvue.jscomponents

Encase React black box block components and incorporate DOM event listeners

In my React component, I am using a standard interface to wrap various other components that act as "blackbox" plugins, since I may not have authored them. These plugins must meet certain requirements outlined in the interface to work within the plugin wra ...

javascriptreactjs

I am experiencing an issue with using double quotation marks in VS Code

Whenever I press the double quote symbol like this "", the cursor automatically moves to the end. While this may be natural, I would prefer the cursor to move inside the double quotes automatically when pressing them. Additionally, it's a bi ...

javascripthtmlreactjsvisual-studiovisual-studio-code

Adding rows dynamically to multiple tables on a single page using a single function

I am facing a situation where I have multiple tables and a function that adds rows to these tables: <table id="table1" style=" border-collapse: collapse;"> <tr id="table1row1">... <tr id="table1row2">... <table id="table2" style=" bor ...

javascriptjqueryhtmlhtml-tableincrement

Changing the value in a URL String using JavaScript

I am in possession of a String that contains a URL resembling the following: var url ="http://ispeakphone.com/checkout/cart/add/uenc/aHR0cDovL2lzcGVha3Bob25lLmNvbS9zYW1zdW5nL3NhbXN1bmctZ2FsYXh5LXMvZ2FsYXh5LXM5LXBsdXMuaHRtbA,,/product/619/form_key/foxmD7jg ...

javascriptjquery

Customized queries based on conditional routes - expressjs

Can we customize queries based on optional routes? app.get('/:category/:item?', function (req, res) { var category = req.params.category; var item = req.params.item; var sqlQuery = 'SELECT * FROM items WHERE category = ? AND item = ?&a ...

javascriptnode.jsexpressroutes

What are the steps to installing a .deb file offline using Docker?

I am planning to install a .deb file on my Docker container. In my Dockerfile, I execute the following command: RUN apt-get install -y ./fonts/ttf-mscorefonts-installer_3.6_all.deb ROOT Folder |->Dockerfile |->fonts |-> ttf ...

javascriptnode.jsdockercachingdeb

Function is never called by SetTimeout

Attempting to simulate a long running operation using a loop, like this: var x, y; x = true; y = false; while (x) { if (!y) { setTimeout(function() => { x = false; }, 1000); y = true; } } Wondering why the l ...

javascript

The JavaScript file fails to load when accessing port 8080

As I embark on my journey into backend development, please bear with me. Currently, I am working on a JavaScript program that retrieves text data from my localhost. I have set up an HTTP server using Node.js which serves as a regular HTTP server. The serve ...

javascriptnode.jsexpresshttpxmlhttprequest

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for adjusting the height of MUI Date Picker to fit your preferences

<Box sx={{ m: 1 }}> <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker label="Enter Date" slotProps={{ textField: { height: "10px" } }} ...

javascriptreactjsmaterial-ui

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...

javascriptjqueryhtmlcssajax

Undefined data is frequently encountered when working with Node.js, Express, and Mongoose

Having a beginner's issue: I'm attempting to use the "cover" property to delete a file associated with that collection, but the problem is that it keeps showing up as "undefined". Has anyone else encountered this problem before? Thank you in adv ...

javascriptnode.jsmongodbexpressmongoose

Framework7 disables the jQuery.appear plugin

I am utilizing Framework7 and aiming to incorporate jQuery.appear for executing a script once an element becomes visible to the user. The implementation is successful when using this code in a basic HTML setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlhtml-framework-7