I am attempting to utilize Vuejs to sum the amount array in Laravel Relationships using computed properties.
https://i.stack.imgur.com/MiMxP.png
However, it is currently returning a NaN result...
computed: {
subTotal() {
return this.items.reduce((total, item) => {
return total + parseFloat(item.deposits.amount);
}, 0);
}
},
Thank you for any assistance!
This code snippet calculates the total sum of deposits for each item in the array.
computed: {
subTotal() {
let itemSums = []
this.items.forEach(item => {
if (item.deposits && item.deposits.length > 0) {
let totalDeposit = item.deposits.reduce((total, val) => {
return parseFloat(total.amount) + parseFloat(val.amount);
}, 0);
itemSums.push(totalDeposit);
} else {
itemSums.push(0);
}
})
return itemSums
}
},
How to calculate the total deposit amount in Laravel
protected $appends = ['deposit_amount'];public function getDepositAmountAttribute(){
return $this->deposits()->sum('amount');
}Implementing a VueJS Computed Property for calculating total deposit amount
computed: {
deposit_amount() {
var amount = 0;
for(let i = 0; i < this.item.deposits.length; i++) {
amount += parseFloat(this.item.deposits[i].amount);
}
return amount;
}
}Vue has an interesting feature where vue-cli is not necessary for running it without a server. Initially, I thought otherwise. The Vue installation page at https://v2.vuejs.org/v2/guide/installation.html mentions using a script under CDN. <script src=&q ...
I am currently working on customizing the navigation for my Vue application. My goal is to create a main menu at the top that displays all the root level routes, and a side menu that appears when navigating through child routes. Here is an example of what ...
Here's the issue I'm facing: I have two arrays. The first one, which we'll call A, looks like this: [{id: 2, otherValue: "hello"}] The second array, which we'll call B, looks like this: [{1: {title: "title1", text: "message1"}, 2: {t ...
I encountered an issue with a third-party library. To address this, I created a component that monitors the position property and triggers the reload method to update the map's overlays. Everything worked correctly when there was only one v-for pres ...
I've recently started diving into Vue, and I've found myself responsible for tweaking an existing codebase. There's this data.js file that caught my attention, containing a handful of objects holding city information, like: export default { ...
I'm on the search for a project that showcases using Vue.js and the Google client library to authenticate with JavaScript, but without the need for transpilers, bundlers, or Node/npm. Does anyone know of such an example out there? I simply want to cre ...
After compiling everything with Laravel Mix, I noticed that the node_modules folder ends up being quite large in size. This got me wondering if it's safe to delete this folder once everything has been compiled. I conducted a little experiment by insta ...
For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...
I recently worked on a project using Vue.js and making API requests with axios. Here is my code snippet: axios({ method: "POST", url: http://abcd.com:5000/start-recording?roomId=${this.roomId}, headers: { 'Access-Control-Allow-Origin': ...
I have developed a basic set of Vue components that are currently working well with an existing C# application. Currently, these components are stored as .html files (imported into the app using <script> tags) and .js files loaded by reference. All ...
Has anyone encountered issues with syntax highlighting for .vue files in PhpStorm while using pug? Is this feature only available in WebStorm and not planned to be included in PhpStorm? In my view file within PhpStorm, it appears like this: https://i.st ...
Exploring the capabilities of vue.js on a basic website. The setup consists of a single index.html file and all JavaScript is housed in an index.js file. The website is a work in progress, but there are no blockers preventing the JavaScript functionality ...
Even though it may seem like a basic question, I'm having trouble figuring out how to accomplish this in VueJS Here's the code I have in HTML: <script> var config = {'cols':4,'color':'red'} </script> ...
Attempting to utilize Vue's Async Actions for an API call is causing a delay in data retrieval. When the action is called, the method proceeds without waiting for the data to return, resulting in undefined values for this.lapNumber on the initial call ...
Currently, my vue frontend server utilizes cookies to manage the login state in conjunction with a basic backend server. The issue arises when set-cookie functions properly in production mode while running npm run serve. However, upon bundling the project ...
I'm working on creating a bar graph with HighchartJS. Everything works perfectly when the start date is set to 1st Jan. However, when I dynamically change the data to start from 2nd Jan, the grouped Bar chart doesn't display properly. It seems th ...
I have a vast array of authors structured as follows: - authors (id, profile_id, title, name) -> totaling 590 authors I also have 4 collections where author.id equals author_id - sales (id, author_id, salesTotal) - subscribers (id, author_id, subscr ...
Currently, I’m developing a Chrome extension that needs to retrieve specific values from a webpage such as the item title. However, instead of fetching the actual title, it is reading a Vue.js template variable. Even when I use DevTools to inspect the p ...
I'm in the process of integrating Stripe into my platform, which is built using Next.js and Laravel. I'm struggling to understand how I can retrieve the data from a transaction and store it in MY Platform's database. For instance, when a us ...
I've noticed a common practice in the CompositionAPI where props are converted to refs using `toRefs` function. This has left me feeling a bit confused. For instance, citing the Vue 3 official guide: export default { props: { user: { type ...