Modify a data value when another one is updated

Within my Vue.js data, I have a component that generates form inputs. You can view a live version of this component here. The data structure is as follows:

  data: {
    providerData: {
        archive_cost: {
            legend: 'Warehouse cost',
            fields: {
                monthly_room: {
                    label: 'Monthly cost of room',
                    value: '200',
                    unit: '$'
                },
                monthly_maintance: {
                    label: 'Monthly maintenance cost',
                    value: '10',
                    unit: '$'
                },
                summary: {
                    label: 'Summary cost',
                    value: '',
                    unit: '$',
                    disabled: true
                }
            }
        }
    },
},

I need the value of 'summary' to be the sum of 'monthly_room' and 'monthly_maintenance'. Is there a way to do this without using computed values for each individual field, considering there are about 20 similar values in this form that need to be handled separately by the component?

javascriptvue.js

Answer №1

If you want to monitor a variety of values that impact the summary.value when they are updated, you can use the following code snippet:

watch: {
    '[providerData.archive_cost.fields.monthly_room.value, \
    providerData.archive_cost.fields.monthly_maintenance.value]': function() {
        this.providerData.archive_cost.fields.summary.value = 
            parseInt(this.providerData.archive_cost.fields.monthly_room.value) + 
            parseInt(this.providerData.archive_cost.fields.monthly_maintenance.value);
    }
},

Check out this JSFiddle link to see the changes in action.

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

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Within my React Redux application, I have implemented a setInterval() function that continuously calls an action creator this.props.getLatestNews(), which in turn queries a REST API endpoint. Upon receiving the API response (an array of objects), the actio ...

javascriptnode.jsreactjsreduxreact-redux

Create a dynamic HTML table in React by leveraging arrays

I am working with two arrays: headings=['title1','title2'] data=[['A','B'],['C','D']] How can I efficiently convert this data into an HTML table that is scalable? title1 title2 A B ...

javascriptreactjs

Why won't the code for detecting the DEL key in a textarea work on my computer?

I've been trying to detect when a user presses the Delete key and came across this helpful tutorial here The code worked flawlessly on jsfiddle.net, you can check it out here- http://jsfiddle.net. However, when I copied the same code to my local comp ...

javascriptjquery

displaying a PDF file in Safari

Is there a way to display a PDF document within an HTML page without encountering a missing plugin error? I attempted to use the following code, but the error persists. Interestingly, if I drag the same PDF file directly into my browser, it displays perfe ...

javascriptmacospdfsafari

What is the best way to reorganize the switch case in order to invoke methods from a class?

I have a special character called Hero within my game, this Hero inherits characteristics from the Player class and can perform a variety of actions. The majority of these actions are customized to suit the Hero's abilities. class Hero extends Player ...

javascriptnode.jsswitch-statement

Utilizing AngularJS for seamlessly closing Bootstrap Modal Popup

Having recently delved into AngularJS, I am seeking assistance with a particular issue; In my AngularJS (v 1.6) application, there is a Bootstrap modal window for user login. Once the user successfully logs in, I wish for Angular to automatically close the ...

javascriptangularjshtmltwitter-bootstrap

Concealing a Vuejs dropdown when clicking outside of the component

I am currently working on a Vuejs project where I am creating a menu component. This menu consists of 2 dropdowns, and I have already implemented some methods and used Vue directives to ensure that when one dropdown is clicked, the other hides and vice ver ...

javascriptvue.js

Refresh the information displayed in the HTML table

I've been assigned the task of developing a shift management web app to help our current employees track their shifts. The website StaffHub has been suggested as a reference for my web app, and I am currently focused on implementing the calendar featu ...

javascriptphpjquerysymfony

The MIME type for .rar and .tar files is not specified

Why is it that Javascript (Windows 8.1, Firefox) doesn't seem to recognize mime types for .tar files or .rar files, among others? Is there a way to fix this issue without resorting to unconventional methods? I really need to be able to get the mime ty ...

javascriptjquerymime-types

Encountering a problem with the Ionic Modal Slider: unable to locate the matching element associated with delegate-handle= when using $

I am encountering a problem with my Ionic application that features multiple Angular controllers. Specifically, I have a LoginCtrl and RegisterCtrl controller set up. The issue arises when I try to trigger a modal with a slider from the RegisterCtrl by usi ...

javascriptangularjscordovaionic-framework

[Vue alert]: Repeated identifiers found:

[Vue alert]: Duplicate keys identified: '65535'. This could lead to an update issue. found within ---> <Board> at src/components/Board.vue <App> at src/App.vue <Root> this particular snippet of code <div ...

vue.js

When integrating AngularJS with CKEditor, an error regarding module dependency injection may occur, causing the following message to be displayed:

Just starting out with Angularjs and attempting to integrate Ckeditor into my webapp. Currently encountering the following error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=editor&p1=Error%3A%…Flo ...

javascriptangularjsnode.jsckeditor

Implementing Angular CDK for a dynamic drag-and-drop list featuring both parent and child elements

I'm currently working on setting up a drag and drop list within Angular using the Angular CDK library. My goal is to create a list that includes both parent and child elements, with the ability to drag and drop both parent items as well as their respe ...

javascripthtmlangulardrag-and-dropangular-cdk-drag-drop

Explore an object to locate an element along with its parent

Here is an example of an object: $scope.categories = [ { value: 'One', id: 1, childs: [ { value: 'Two', id : 2, childs: [ { v ...

javascriptangularjs

Creating an Angular table with dynamic column headers

While working on an angular app to showcase data from different sources, I set up a JSON file with a list of various data sources along with their respective values. Here's an example: var configurableConfigurations=[ { name:"Locations", ...

javascriptjqueryangularjs

Tips for recognizing when AJAX content, such as images and text, has been fully loaded within a div while utilizing both AJAX and jQuery

$.ajax({ type: 'POST', url: 'show-photo3.php', data: 'type='+type+'&count='+count+'&aid='+aid, dataType: 'html', success: function(response) { //alert(response ...

phpjavascriptjqueryajax

Transformed the Next.js Pages Router into an Application Router

Looking to make a change in my API written with Nextjs's Pages Router. Currently, it serves as a proxy for downloads and I am interested in converting it to the App Router method. Does anyone have any guidance on how to go about implementing this? imp ...

javascriptnext.jsnext.js13

The Mean stack application is throwing an error message: "user.comparePassword is not

This section contains my user models in the file named "user.js". var mongoose = require('mongoose'); var bcrypt = require('bcryptjs'); let emailLengthChecker = (email) => { if (!email) { return false; } else { if (emai ...

javascriptnode.jsmongodb

Limiting access in _app.js using Firebase and Redux

In my application, users can access the website without logging in. However, they should only be able to access "/app" and "/app/*" if they are authenticated. The code I have written seems to work, but there is a brief moment where the content of "/app" ...

javascriptreactjsreduxnext.js

What is the best method for accessing the service response data when I am sending back an array of custom map with a promise as an object?

Sharing my code snippet below: function createObject(title, array){ this.title = title; this.array = array; } //$scope.objects is an array of objects function mapPromise(title, promise){ this.title= title; this.promise = promise; }; var fet ...

javascriptangularjspromiseangular-promise