vuetify 数据表计算属性到 sql

Question

I have a simple attendance app which stores data in sql. This is working fine but I need to store one computed property in sql too. Here is a part of config:

                        <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");
    },

If I use {{ totaltime }} this is working correctly on site but I need it to be stored in sql table totaltime like other fields.

Answer 1

Keep totalTime as field of the editedItem property and update it using watcher property instead of computed one:

watch:{
  editedItem:{
     handler(val){

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

    },
   deep:true
   }
}

This makes that property available in the model when you want to submit it to the backend