正在将 table 中的数据更新到数据库？

Question

我有一个时间跟踪 sheet 网络应用程序，其中每一行代表数据库中的一个用户，每一列都有一个输入字段，用户将在其中输入他们为此工作的小时数具体的日子。 fiddle 向您展示它的样子：https://jsfiddle.net/L5u1fc0a/138/

基本上，我怎样才能确保只向数据库发送新数据。我希望（显然）在 table 中显示当前值，我正在获取该数据并将其存储在 Vue v-model 中（参见 fiddle 中的 worklogs） - worklogs 中的数据填充了 table。我的问题是我不知道如何处理额外的时间。如果用户在特定日期再添加一个小时并点击 "Update"（在 fiddle、"Save" 中），它将发送包含所有当前数据的整个 worklogs 数据值值 + 新值，因此如果有人只添加一个输入，它仍会发送 worklogs 对象中的所有内容。在 fiddle 中，如果您在某处输入一个新值并点击 "Save" 按钮，您可以看到我的数组 updateData 也填充了所有现有值 - 我如何才能只发送新更新的值数据库的值？

Answer 1

如果您随时更改数据，您将无法真正了解更新的内容。您需要在工作时将它们分开，然后只保存 updateData。所以我将你的 worklogs 重命名为 saved，并使 updateData 成为一个对象，它将保存与 saved 完全相同类型的条目。

我做了一个合并 saved 和 updateData 的计算，并将其用于绑定 value。你不能在这里真正使用 v-model 因为你不能将单个元素写回计算字典。但你不需要。在更改时，您更新 updateData 并且 value 保持一致。

（旁注：如果您将每个输入都设为一个组件，则可以使用 v-model，但仍然需要在父级中处理所有管道。）

save 函数执行任何后端调用，更新 saved，并清空 updateData。

/* app instance */
new Vue({
  el: '#app',
    data() {
     const currentDate = new Date();
     return {
      saved: {
        "1,2018-11-01": "8", 
        "1,2018-11-02": "8",
        "2,2018-11-03": "10",
        "2,2018-11-04": "10"
    },
      updateData: {},
      users: [
          {id: 1, firstName: 'Jay', lastName: 'Carter', email: 'jayz@rocafella.com'},
          {id: 2, firstName: 'Day', lastName: 'Darter', email: 'dayz@rocafella.com'}
        ],
        secondHalf: false,
        selectedYear: currentDate.getFullYear(),
        selectedMonth: currentDate.getMonth() + 1,
        
    };
  },
  methods: {
    prevPeriod() {
      if (!this.secondHalf) {
        this.selectedMonth -= 1;
        this.secondHalf = !this.secondHalf;
      } else {
        this.secondHalf = !this.secondHalf;
      }
      if (this.selectedMonth < 1) {
        this.selectedYear -= 1;
        this.selectedMonth = 12;
      }
    },
    nextPeriod() {
      if (this.secondHalf) {
        this.selectedMonth += 1;
        this.secondHalf = !this.secondHalf;
      } else {
        this.secondHalf = !this.secondHalf;
      }
      if (this.selectedMonth > 12) {
        this.selectYear += 1;
        this.selectedMonth = 1;
      }
    },
    getMonth(date) {
      const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      return months[date.getMonth()];
    },
    getWeekDay(date) {
      const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     return days[date.getDay()];
    },
    setUpdateData(userId, day, event) {
      const key = this.dataKey(userId, day);
      const value = event.target.value;
      
      if (this.saved[key] !== value) {
       this.$set(this.updateData, key, value);
      } else {
       this.$delete(this.updateData, key);
      }
    },
    save() {
   // Presumably, this would go somewhere that would refresh saved, but
      // the ultimate effect is just to copy the updateData into saved and
      // empty updateData
   Object.assign(this.saved, this.updateData);
      this.updateData = {};
  },
    dataKey(userId, day) {
     return `${userId},${this.convertDateString(day)}`;
    },
    convertDateString(date) {
      let isoWithTimezone = new Date(
        date.getTime() - date.getTimezoneOffset() * 60000
      ).toISOString();
      return isoWithTimezone.split("T")[0];
    }
  },
  
  computed: {
   allData() {
     return Object.assign({}, this.saved, this.updateData);
    },
    getDates() {
      const year = this.selectedYear;
      const month = this.selectedMonth;
      
      let currentDate = new Date(year, month - 1, 1);
      const dates = [];
      
      while (currentDate.getMonth() == month - 1) {
        dates.push(currentDate);
        currentDate = new Date(
         currentDate.getFullYear(),
          currentDate.getMonth(),
         currentDate.getDate() + 1
        );
      }
      
      if (this.secondHalf) {
        return dates.slice(15);
      } else {
        return dates.slice(0, 15);
   }
    },
  }
})

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div>
    <p>{{this.selectedYear}} - {{this.selectedMonth}}</p>
    <div>
      <button @click="prevPeriod"> ‹‹ </button>
      <button @click="nextPeriod"> ›› </button>
    </div>
    <div>
      <table id="conTab">
        <tr>
          <td></td>
          <td v-for="(date, key) in getDates" :key="key" style="font-size: 80%;"> {{getWeekDay(date)}}</td>
        </tr>
        <tr>
          <td style="border-top-width: 0px; border-left-width: 0px"></td>
          <td v-for="(date, key) in getDates" :key="key" style="font-size: 80%;"> {{getMonth(date)}} {{date.getDate()}}</td>
        </tr>
        <tbody>
          <tr v-for="(user, i) in users" :key="user.id">
            <td>
              {{user.firstName}}
            </td>
            <td v-for="(day, key) in getDates" :key="key">
              <input type="number" style="width: 35px;" :value="allData[dataKey(user.id, day)]" @change="setUpdateData(user.id, day, $event)">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div><button @click="save">SAVE</button></div>
  </div>
  <pre>{{$data}}</pre>
</div>

正在将 table 中的数据更新到数据库？

Upserting data from table to database?

javascript

post

http

put

vue.js