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

Show where the image should be placed according to the coordinates of the mouse click

My project begins with a blank canvas, prompting the user to click anywhere on the page to reveal an image. My goal is to show an image at the exact location where the user clicks. Although I can successfully trigger an image to appear in the corner of the ...

javascripthtmlcss

The Javascript executor in Selenium is delivering a null value

My JavaScript code is causing some issues when executed with Selenium's JavascriptExecutor. Strangely, the code returns null through Selenium but a value in Firefox developer console. function temp(){ var attribute = jQuery(jQuery("[name='q& ...

javascriptseleniumnullpointerexceptionselenium-webdriver

Eliminate the need for require statements in TypeScript-generated JavaScript files

I am working on a website project and utilizing TypeScript for development. While using the tsc compiler, I noticed that all my JavaScript code compiles correctly. However, when I include an import statement in my TypeScript files, it gets compiled into J ...

javascripttypescript

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

javascriptjqueryhtmltext

Is there a way to return two separate functions within a single function that can be rendered as two distinct components in a React application without one function overriding the other?

I'm currently working on a react header that uses conditional rendering to show different elements based on the URL or user login status. However, I'm facing an issue where only one button is being rendered instead of two side by side in my defau ...

javascriptreactjsantd

Encountered an issue while attempting to start an SSR server with inertiajs

I followed all the necessary steps to set up an ssr application, but unfortunately, I am encountering some difficulties. config/inertia export const inertia: InertiaConfig = { view: 'app', ssr: { enabled: true, autoreload: process.en ...

javascriptnode.jsinertiajs

Tips for displaying text within an input field labeled "password" and then reverting back to a password display after entering text

I am working with a login form that includes a password field: <input type="password" name="password" id="password" value="Password" maxlength="40" required style="width: 130px; font-size: 10px;" /> Currently, the password field displays "******** ...

javascripthtmlinput-field

What is the best way to transfer data between components in VueJS while utilizing the Vue router?

My route setup includes the following: Vue.use(Router) export default new Router({ routes: [ { path: '/group/:id', name: 'Group', component: GroupContainer, children: [ { // when /group/: ...

vue.jsvuejs2vue-componentvue-router

Get the npm distribution package without the need to actually install npm

Is there a way to obtain an npm package without the need for running npm view XXX ... or installing node/npm? Specifically, I am attempting this process on a Linux operating system. ~UPDATE~ I now understand that I should have provided more details about ...

javascriptnode.jsnpm

React is currently in the process of downloading images that were not fetched during

(Update: Initially, I suspected React Router was the cause of this issue. However, after eliminating React Router from the codebase, the problem persists. Therefore, I have extensively revised this inquiry.) Situation: I am dealing with paginated pages th ...

javascriptreactjsperformancereact-dom

How to pass the Node environment to layout.jade in Express without explicitly specifying the route

Passing parameters to Jade files seems like a piece of cake: app.use('/myroute', function (req, res) { res.render('myview', {somevar: 'Testing!'}); }); But, I have my layout.jade file that is automatically read and rendere ...

javascriptnode.jsexpresspug

AngularJS: Modifying values in one div updates data in all other divs

The webpage appears as shown below: HTML <li class="list-group-item" ng-repeat="eachData in lstRepositoryData"> <div class="ember-view"> <div class="github-connection overflow-hidden shadow-outer-1 br2"> <!-- ...

javascripthtmlangularjs

Is there a way to identify the Xpath after clicking a button that adds a row to the JQGrid?

Seeking the Xpath for the Row that was added upon clicking a button. Need to click on the datepicker in the first row and first column to select a date. How can I locate the Xpath for this date picker element? See my code snippet below `<table ...

javascriptjavaselenium-webdriverjunit

I used npm to install AngularJS and then included AngularJS in my application

My goal is to set up AngularJS v1.5.x using npm and integrate it into my application for seamless utilization. Most tutorials opt for downloading the Angular Version from angularjs.org and manually adding it to the index.html within a <script></sc ...

javascriptangularjsnpm

Having trouble with v-for in Vue js on vsCode?

https://i.stack.imgur.com/u3vzh.png It seems that I always encounter this issue when utilizing v-for in my projects. While I didn't face any problems with it previously, I've noticed that it has become a frequent error as of late. Why is it tha ...

vue.jsvisual-studio-code

"Explore the versatility of React Day Picker with customizable months and weekdays_long

I have implemented the following packages: "react": "^18.2.0", "react-day-picker": "^8.1.0", and I am attempting to translate the months and days into French. However, despite passing the translated arrays to my < ...

javascriptreactjsreact-day-picker

Scenario-specific blueprints

I'm currently facing a challenge in incorporating logic into a dustjs template, and I find it challenging to integrate all the components seamlessly. Here is an example of the JSON data I have: { "names": [{ "name": "User 1", "is ...

javascriptjsondust.js

What methods are most effective for showcasing Flash messages within Express.js?

I have a Node.js app in the EJS framework and I am new to JavaScript. Could someone please advise me on the correct way to set flash messages in Node.js? Below is my code which is throwing an error: C:\Users\sad\Desktop\Node Applica ...

javascriptnode.jsexpressnpm

Unusual Methods in Vue.js: Exploring Odd Behavior

In my application, I have a single data variable called message, as well as a method in the methods section that performs cryptographic algorithms. Below is the code snippet: export default { data: () => ({ message: "" }), methods: { clic ...

javascriptvue.jswebpack

What is the best way to bind a model to a directive in Angular.js?

I have been experimenting with different methods to create a two-way binding between my directive and repeater, but so far I haven't been successful. Although I have tried various strategies suggested online, the current setup does not pass item.myDat ...

javascriptangularjs