vuetify 数据表计算属性到 sql答案

【问题标题】：vuetify data-table computed property into sqlvuetify 数据表计算属性到 sql
【发布时间】：2020-08-01 22:14:51
【问题描述】：

我有一个简单的考勤应用程序，它将数据存储在 sql 中。这工作正常，但我也需要在 sql 中存储一个计算属性。这是配置的一部分：

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

如果我使用 {{ totaltime }}，这在现场可以正常工作，但我需要像其他字段一样将它存储在 sql 表 totaltime 中。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

将totalTime 保留为editedItem 属性的字段，并使用观察者属性而不是计算属性对其进行更新：

watch:{
  editedItem:{
     handler(val){

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

    },
   deep:true
   }
}

当你想将它提交到后端时，这使得该属性在模型中可用

【讨论】：