Converting Vuetify data-table computed properties to SQL query transformation

I have a straightforward attendance application that is currently storing data in a SQL database. However, I am faced with the task of storing a computed property in the SQL database as well. Here is a snippet of the configuration:

                        <v-menu
                        v-model="start1"
                        :close-on-content-click="false"
                        :nudge-right="40"
                        transition="scale-transition"
                        offset-y
                        min-width="290px"
                      >
                        <template v-slot:activator="{ on }">
                          <v-text-field
                            v-model="editedItem.start1"
                            prepend-icon="event"
                            readonly
                            label="Čas od *"
                            :rules="timeRules"
                            required
                            v-on="on"
                          ></v-text-field>
                        </template>
                        <v-time-picker
                          format="24hr"
                          :max="editedItem.end1"
                          :allowed-minutes="allowedStep"
                          v-model="editedItem.start1"
                          @input="start1 = false"
                        ></v-time-picker>
                      </v-menu>
                    </v-col>
editedItem: {
      date: "",
      start1: "",
      end1: "",
      start2: "00:00:00",
      end2: "00:00:00",
      start3: "00:00:00",
      end3: "00:00:00",
      totaltime: "",
      km: "",
      place: "",
      note: ""
    },

computed:
totaltime() {
      return this.moment
        .utc()
        .startOf("day")
        .add(this.computedTime66, "minutes")
        .format("HH:mm");
    },

Although using {{ totaltime }} displays the correct result on the website, I require it to be also stored in the SQL table under the totaltime field, similar to the other fields.

Answer №1

Ensure that the totalTime remains a field within the editedItem object and keep it updated using a watcher property instead of a computed one:

watch:{
  editedItem:{
     handler(val){

       this.editedItem.totaltime =this.moment
        .utc()
        .startOf("day")
        .add(this.computedTime66, "minutes")
        .format("HH:mm");

    },
   deep:true
   }
}

This approach allows you to access the property in the model when you need to submit it to the backend

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

Question about Looping Concept

var answer = ""; var correct = "4"; var question = "What is 2 * 2?"; for(i = 2; i < 5; i++) { answer = prompt(question, "0"); if (answer == correct) { alert("Your answer is correct!"); break; } } Before the break command is ...

Exploring the implementation of --history-api-fallback in webpack

let path = require('path') module.exports = { entry:path.resolve('public/src/index.js'), output: { path:__dirname + "/public", filename: "bundle.js" }, module: { loaders: [{ exclude: / ...

The method continues to receive null values from Ajax despite successfully retrieving the data from Facebook

My current challenge involves creating a login using Facebook. The console indicates that the requested data (email, first_name, etc.) is being retrieved successfully, but for some reason, the AJAX request keeps sending null data to the PHP method. Below ...

Mastering the utilization of the Data object in VueJS with Decorators can be tricky. One common error message you might encounter is, "Class method 'data' expected 'this' to be used."

Error > The class method 'data' should use 'this' but it is not. I encountered this issue and believed I fixed it as shown below: TypeScript Unexpected token, A constructor, method, accessor or property was expected <script lang ...

Can I link the accordion title to a different webpage?

Is it possible to turn the title of an accordion into a button without it looking like a button? Here is an image of the accordion title and some accompanying data. I want to be able to click on the text in the title to navigate to another page. I am worki ...

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

Having trouble with Javascript/jQuery not functioning in IE8?

My current project involves a website that functions smoothly in Chrome, but encounters issues with running JavaScript/jQuery scripts in IE8. Even a simple alert on page load fails to execute. Admittedly, my approach is a bit messy as I have mixed CSS an ...

Issue with the transmission of FormData and string data to PHP

Struggling to properly handle sending file data and string data together through ajax to PHP. Having trouble retrieving the correct string data from $_POST[] in PHP, resulting in only receiving the initial alphabet of a string instead of the specific produ ...

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

Encountering problems with ajax technology

As a newcomer to Laravel and Ajax, I am facing an issue with displaying the state of the selected country in a dropdown list. Although the data is successfully fetched from Laravel and received through Ajax, I am struggling to dynamically add it to the H ...

Personalized Pop-up Notification Upon Exiting Chrome Tab

I'm trying to implement a custom modal window that appears when the user attempts to close the Chrome Tab where my app is running by clicking the X button, displaying a message asking "Are you sure you want to close?". However, despite my efforts, I a ...

Experiencing the "Module not found" issue while incorporating SCSS into React applications

I attempted to apply a SCSS style to my "Logo.js" component, but I am still unable to resolve the error that keeps popping up: ERROR in ./src/components/Logo/Logo.js 5:0-19 Module not found: Error: Can't locate 'logo.scss' in '/Users/a ...

Choosing specific anchors based on their corresponding div ids

Just beginning my journey with JS, looking to tackle an issue (I know, everyone says that!). My task is to create a script that can choose an anchor element and inject an <img>. Nested within a div with the id of _nwa_social_logins, there are multipl ...

svg-to-json.js | The mysterious disappearing act of my file

After completing the installation process for svg-to-json.js as detailed in my previous post, I ran the command: node svg-to-json.js filename.txt The expectation was that a .json file would be generated, but I couldn't locate it. Is it supposed to ...

What could be causing the updated JavaScript file to not run on a live Azure website using ASP.NET MVC?

After making a minor adjustment to my JavaScript file on my deployed ASP MVC website hosted on Azure, I decided to redeploy everything. However, upon checking the resource files, I noticed that the JavaScript had indeed been changed, but the behavior of th ...

Looking for assistance in setting a new initial state for a javascript toggle on page load

Need assistance with customizing the Youtube-TV JS plugin for a client website? The current setup loads the player with a playlist in an open state, but the requirement is to load it with the toggle closed, displaying the array of playlists instead. If y ...

Changing the location or filename of the .env file in Nuxt: A comprehensive guide

I'm looking for a way to customize the location and name of my environment variable file (.env) in my Nuxt project, without relying on the @nuxtjs/dotenv module. I know that this functionality has been built into Nuxt since version v2.13, so I don&ap ...

Adjust the pagination page size based on the value in the Angular scope dynamically

My goal is to provide the user with the ability to adjust the number of rows displayed in a table. This feature is crucial for our web app, as it needs to be accessible on various devices and should allow users to customize their viewing experience to redu ...

In TypeScript, a mapped type is not allowed to define properties or methods

My challenge involves defining an interface with keys that match a specific enum key type. However, when I attempt to declare this type, I encounter the following error message: A mapped type may not declare properties or methods. Below is the code snip ...