Adding up values of objects in a different array using Vue.js

Recently, I started using VueJs and encountered an object that contains arrays. One of the tasks I need to accomplish is to display the total sum of all amounts in one of the columns of the table. Here is my table structure:

<tr v-for="(transaction,index) in transactions" >

<td>{{ index }}</td>

<td>show sum of all amount here</td

</tr>

Here is a snippet of the transaction data:

026b148e-c7dd-4891-b4d1-15a492c971a4: [
{
id: 106,
type: "income",
created_at: "2020-06-28 13:44:08",
updated_at: "2020-06-28 13:44:08",
amount: 10,
description: null,
type_of_pay: "group",
invoice_number: "026b148e-c7dd-4891-b4d1-15a492c971a4",
},
{
id: 107,
type: "income",
created_at: "2020-06-28 13:44:08",
updated_at: "2020-06-28 13:44:08",
amount: 1,
description: null,
type_of_pay: "group",
invoice_number: "026b148e-c7dd-4891-b4d1-15a492c971a4",
package: {}
}
],

I'm looking for a simple and clear solution to achieve this task. Any suggestions?

javascriptvue.js

Answer №1

To improve efficiency, consider creating a computed property named "totalSum" to calculate the sum of all transactions and then incorporate this into your template.

computed: {
    totalSum() {
        return this.transactions.reduce((sum, transaction) => {
            return sum += transaction.amount;
        }, 0);
    }
}

You can now use this computed property in your template like so:

<td>{{ totalSum }}</td>

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

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss

Retrieve the identifier of the higher-order block when it is clicked

When I have a parent block with a nested child block inside of it, I expect to retrieve the id of the parent when clicked. However, the event target seems to be the child element instead. Is there a way for JavaScript to recognize the parent as the event ...

javascripthtmleventsonclick

Efficiency of Promise-based parallel insert queries in MySQL falls short

I have developed a code in Node.js to execute insert queries using Promise.js but unfortunately, I am encountering an exception stating "Duplicate Primary Key" entry. Here is the snippet of the code: var Promise = require("promise"); var mySql = requir ...

javascriptnode.jspromisenode-mysql

What is the best way to extract parameters from a JSON object?

Here is the complete code: $.post('test.php', { id: id },function (data) { console.log(data); var Server = data.response.server; var Photo = data.response.photo; console.log(Server); console.log(Photo); }); When I receive data I get JSON data ...

javascriptjqueryjson

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

c#javascripthtmldom

What are the steps to integrate Material-UI Tabs with react-router?

I've been working on integrating Material-UI tabs with routing in my project. Although the routing is functioning well and displaying the selected tab, the smooth animation while navigating between tabs seems to be broken. How can I ensure that react ...

javascriptreactjsreact-routermaterial-uireact-router-dom

What could be preventing this AJAX call from running correctly?

I am in the process of developing a website that provides users with a discount based on a promotional code they can input. It is important for me to verify the validity of the code in our database before allowing a new sign-up to proceed. Below is the AJA ...

javascriptphpajaxpost

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

Incorporate PNG files with pre-defined labels in a React element

In my application, there is a collection of PNG images with filenames consisting of only 2 letters like aa.png, ab.png, ac.png, and so on. Additionally, there is an API endpoint that retrieves an array of objects with a property "name" containing 3 letter ...

javascriptreactjsreact-hooksmaterial-ui

Issue with BCRYPTJS library: generating identical hashes for distinct passwords

After conducting a thorough search on Google, I couldn't find anyone else experiencing the same issue. The problem lies in the fact that no matter what password the user enters, the system returns the hashed value as if it is the correct password. Eve ...

javascriptnode.jsbcrypt

A cutting-edge JQuery UI slider brought to life using HTML5's data-* attributes and CSS class styling

I've been attempting to create multiple sliders using a shared CSS class and HTML5 data attributes, but unfortunately, I haven't had much success so far. Although I am able to retrieve some values, there are certain ones that simply aren't w ...

javascriptjqueryhtmljquery-uijquery-ui-slider

Dealing with ParseInt NaN problems in your code: a comprehensive guide

I have a code where I am trying to calculate the sum of input values. It works fine when numbers are entered, but if any input field is cleared, it shows total as NaN. I understand that using parseInt for number value is causing this issue, but without usi ...

laravelvue.jsvuejs2

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

Is it possible to have a getter in vuex dynamically update when another getter's value changes?

Within my vuex store, I have this getter that retrieves authority_count: authority_count (state, getters) { return getters.dataView?.getUint16(4, true) || state.pack.authority_count; } I want authority_count to default to state.pack.authority_count ...

javascriptvue.jsvuejs2vuexgetter

Changing a property of an object in Angular using a dynamic variable

It seems like I may be overlooking a crucial aspect of Angular rendering and assignment. I was under the impression that when a variable is updated within a controller's scope, any related areas would automatically be re-evaluated. However, this doesn ...

javascriptangularjs

The Vuetify theme seems to be getting overlooked

I recently created a file in my plugins directory with the following code snippet: import Vue from "vue"; import Vuetify from "vuetify/lib/framework"; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light ...

vue.jsvuejs2vuetify.js

Developing a two-dimensional JavaScript array using an AJAX PHP request

I've been working with a MySQL table that stores image data. My goal is to extract this image data and store it in a JavaScript array. The fields I need for the array are "image_ref" and "image_name." To achieve this, I understand that I'll nee ...

javascriptphpajaxjsonmultidimensional-array

Strategies for troubleshooting asynchronous JavaScript with multiple script loading

Typically, I am familiar with setting breakpoints, inspecting variables, and stepping into functions. The file Default.htm contains numerous scripts and empty placeholders. I prefer to proceed through debugging step-by-step. Unfortunately, setting a brea ...

javascriptajaxdebuggingfiddlergoogle-chrome-devtools

Generating a highchart by retrieving JSON data using AJAX

I'm currently working on generating a basic chart on a webpage using data from a MySQL database that is fetched via a MySQL script. My main challenge lies in understanding how to combine the ajax call with the necessary data for the chart. I'm n ...

javascriptjqueryajaxjsonhighcharts

The use of Handlebars expressions within the {{#each}} block is crucial

I am currently working on my new portfolio site and I have a question about how to place handlebars expressions inside an #each loop. The project is an express application generated by express-generator, and I am using the express-handlebars NPM package: ...

javascriptnode.jsexpresshandlebars.js