How can one efficiently update numerous data properties in a Vue.js application?

My information is as follows:

data() {
        return {
            monday_start: '',
            monday_end: '',
            tuesday_start: '',
            tuesday_end: '',
            wednesday_start: '',
            wednesday_end: '',
            thursday_start: '',
            thursday_end: '',
            friday_start: '',
            friday_end: '',
            saturday_start: '',
            saturday_end: '',
            sunday_start: '',
            sunday_end: '',
            notifmsg: '',
        };
    },

In my calendar system, you can specify the start and end times for each day in this manner:

                                        <tr>
                                            <td>Monday</td>
                                            <td>
                                                <base-time-picker
                                                    :input-data.sync="monday_start"
                                                    field="monday_start"
                                                    label="Monday - Start Time"
                                                    :long-time="true"
                                                    class="mb-3"
                                                />
                                            </td>
                                            <td>
                                                <base-time-picker
                                                    :input-data.sync="monday_end"
                                                    field="monday_end"
                                                    label="Monday - End Time"
                                                    :long-time="true"
                                                    class="mb-3"
                                                />
                                            </td>
                                            <td>
                                                <v-icon
                                                    class="ml-2"
                                                    @click="copy(monday_start,monday_end)"
                                                >
                                                    mdi-compare
                                                </v-icon>
                                                <v-icon
                                                    class="ml-2"
                                                    @click="reset('monday')"
                                                >
                                                    mdi-delete
                                                </v-icon>
                                            </td>
                                       </tr>

A function called copy has been implemented to easily replicate the same timings across all days:

copy(start,end){
        this.monday_start = start;
        this.tuesday_start = start;
        this.wednesday_start = start;
        this.thursday_start = start;
        this.friday_start = start;
        this.saturday_start = start;
        this.sunday_start = start;
        this.monday_end = end;
        this.tuesday_end = end;
        this.wednesday_end = end;
        this.thursday_end = end;
        this.friday_end = end;
        this.saturday_end = end;
        this.sunday_end = end;
    },

If there's a better way of managing this data, I'm open to suggestions.

javascriptvue.jsvuetify.js

Answer №1

Considering the specified environment and variables mentioned, you can effectively utilize the Object.keys() method on your VueJS instance to detect keywords like _start and _end. By creating an array and assigning new values to them, you can streamline your process.

copy(copyDateStart, copyDateEnd) {
    Object.keys(this).filter(key => key.includes('_start')).forEach(key => this[key] = copyDateStart);
    Object.keys(this).filter(key => key.includes('_end')).forEach(key => this[key] = copyDateEnd);
}

For a practical demonstration using Vanilla JS, check out this working example on JSFiddle.

Additional Resources:

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

Executing NodeJS Functions in a Particular Order

Just starting to learn Node and working on building an app. Currently, in my route file, I am attempting to connect to MySQL and retrieve the major of the user, then use it for other operations. However, when I run the webpage, the console displays that t ...

javascriptmysqlnode.js

Leveraging v-radio within v-tab

Is there a way to incorporate the v-radio component within a v-tab and have it automatically selected when the tab is chosen? The challenge I'm facing is that I am unsure of how to individually select a single v-radio without using v-radio-group, as ...

vue.jsvuejs2nuxt.jsvuetify.js

Executing a function in Vue.js upon state changes

I am trying to trigger a function when the state changes in my Vue app. In my component, I can retrieve the boolean state of isOpen. The goal is to execute a function that sets focus on my form input when the modal opens and isOpen is true. I attempted ...

vue.js

Reload a tab on an ajax-enabled webpage

I am currently facing an issue with refreshing a tab instead of the entire page using Ajax. The specific tab in question involves deleting credit cards. When I select the credit card I want to delete and confirm, I use "window.location.reload();" to refres ...

javascriptjqueryajaxreactjs

QuickCopy - Capture only what's in view

Hi there, I have a question: I'm trying to figure out how to make a button copy only the visible text within the element with id="description". Can someone help me troubleshoot? HTML: <p id="description"> Test <span style="display:none"> ...

javascriptjqueryzclip

What is the best way to establish a maximum limit for a counter within an onclick event?

I'm struggling to figure out how to set a maximum limit for a counter in my onclick event. Can someone help me? What is the best way to add a max limit to the counter of an onclick event? Do I need to use an if statement? If yes, how should it be w ...

javascripthtml

Using JavaScript, pass a single parameter to a function that accepts multiple arguments

Within my service, the Angular function is defined as follows: $delegate.isConfigurable = function (product, config) { if (product) { ///..... } return config.getDetail(); }; ...

javascriptangularjs

Duplicate request submissions in ExtJs causing inefficiency

Trying to resolve an issue with my ExtJs table that handles remote filtering, sorting, and paging of data on the server. The problem arises when a default request is being sent alongside every other request: localhost/request?page=1&start=0&limit= ...

javascriptjqueryextjsextjs4request

Calculator: Show individual digits once more following a calculation

After clicking the 'equal' button, the result is displayed. However, if I click another number, it doesn't clear the result. I want the result to stay when operation symbols like '+' or '/' are pressed. While working on t ...

javascriptjquery

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

javascriptcssnode.js

In VueJS and Quasar, what is the best way to retrieve the clicked item in order to pass it to the API?

Utilizing a codepen sample with local data, I am hoping it will work for troubleshooting purposes. However, in reality, I am using vuex and an API endpoint to source the data. Unfortunately, I cannot share the API details. The core functionality involves ...

javascriptvue.jsvuejs2quasar-framework

Expanding choice by incorporating additional or default selections with ng-options

I am currently working on a tag-manager feature within an angular form that utilizes two dropdown menus (in this example, a food category and a specific item). The functionality I am aiming for is when a user selects a food category, the item dropdown shou ...

javascriptangularjs

Vuetify tooltip failing to display

I have integrated the Vuetify tooltip example from the documentation into my app, but unfortunately, the tooltip does not show up when hovering over the specified element: <v-tooltip bottom> <template v-slot:activator="{ on }"> & ...

vue.jsvuetify.js

Two items possess an identical worth

Whenever I make edits, both objects end up being the same. What is the solution to keep them separate? I have an object that I bind to inputs using v-model in order to update it. However, when I edit it without saving changes, the original object gets mo ...

laravelvue.js

Ways to retrieve a converted document using the Microsoft Graph API

I'm encountering an issue when trying to save a PDF file received from the Microsoft Graph API. The call I am making looks like this: const convertConfig = { headers: { Authorization: <my token> } }; convertConfig.headers['C ...

javascriptnode.jsaxiosmicrosoft-graph-apimicrosoft-graph-files

Using Vanilla Javascript to implement a dark mode toggle button

I've been struggling with getting a button to properly switch a website to dark mode. I already have a night mode that works based on the user's location and time, so I know the issue lies within my JavaScript... Initially, I tried adding ' ...

javascript

jQuery ajaxSetup: handling error retries for ajax calls is not possible

When using $.ajaxSetup(), I am faced with the challenge of making an AJAX request after refreshing a valid token in case the previous token has expired. The issue arises when attempting to execute $.ajax(this) within the error callback. $.ajax({ url: ...

javascriptjqueryajax

"Troubleshooting: The unique key prop is not functioning as expected with a

I am continuously receiving the warning message: Each child in a list should have a unique "key" prop. Even though I have assigned a key with an index number to my element, it does not appear in the HTML when inspecting via dev tools. The key values are a ...

javascriptreactjstypescript

Collaborate and reuse Typescript code across various Node projects

Imagine we have a project structured like this: webapps ProjectA SomeClass.ts Package.json ProjectB SomeClass.ts Package.json Common LoggingClass.ts Package.json The Common "LoggingClass" needs to import a module from NPM. Let's say that ...

javascriptnode.jstypescriptnpmshared-libraries

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

When it comes to editing my code, I rely on JSFiddle. However, I have noticed that in certain instances when running JavaScript or jQuery, the code only works if I choose "No wrap - <head>" or "No wrap - <body>". CLICK HERE FOR THE JSFIDDLE EX ...

javascriptjsfiddle