是否可以使用相同的表格将数据提交到不同的表格？答案

【问题标题】：Is it possible to submit data to separate tables using the same form?是否可以使用相同的表格将数据提交到不同的表格？
【发布时间】：2019-03-14 15:55:52
【问题描述】：

您好，我很好奇是否可以使用相同的表单将数据提交到不同的表...目前我的任务表上有一个user_id 列，我的参与表上有一个status 列。现在也许有更好的方法可以做到这一点，但是当 A 任务完成时，需要更新 user_id 并且需要更新参与的 status。出于用户体验的原因，我希望同时更新这些内容。

现在我使用 vue.js 和 vuex，数据通过 axios 提交到我的 laravel 后端，所以更新任务的组件看起来像这样

   <b-modal v-model="modalShow" id="myQuestion" ref="myQuestion" hide-footer title="Update Engagement">
            <form @submit.prevent="updateThisTask">
            <div>
              <div class="input-group my-3">
              <div class="input-group-prepend">
                <label class="input-group-text font-weight-bold bg-primary text-light" for="option">Assign To</label>
              </div>
              <select class="custom-select" id="client_id" v-model="task.user_id">
                <option v-for="user in users" :key="user.id" :value="user.id">
                  {{ user.name }}
                </option>
              </select>
            </div>
            </div>
            <div class="d-flex">
              <b-btn class="mt-3" variant="secondary" @click="modalShow = false">Cancel</b-btn>
              <b-btn class="mt-3 ml-auto" variant="outline-primary" @click="updateThisTask(task.id)">Confirm</b-btn>
            </div>
            </form>
        </b-modal>

当模式弹出时，我希望他们可以选择更新分配给用户的选项（此时我已经这样做了），并且我希望选择分配状态。当我运行updateThisTask方法时，有没有办法在提交之前将数据分离出来？

这里是脚本部分的方法，现在只是更新user_id

methods: {
    ...mapActions(['updateTask']),

    updateThisTask(id) {
      if(!this.task.user_id) {
        return
      } else {
        this.updateTask({
          id: this.task.id,
          user_id: this.task.user_id
        }) 
      }  
    }
  },

如果我离基地很远，请告诉我。

谢谢

【问题讨论】：

为什么在提交数据之前将数据分开，而不是处理将数据从您提交到的控制器中放入您想要的任何表中？
@wheelmaker，有道理。只是想把我的头绕过去。后端可能只是寻找想法的更好选择。
是的，我要么在控制器中处理它，要么为你的任务模型设置一个自动触发更新的观察者

标签： laravel vue.js axios vuex

【解决方案1】：

从问题的描述来看，您似乎想向vuex 发送一个操作以更新后端的两个不同表，并希望同时将更改更新给用户。

如果是这种情况，您可以使用action 和POST 来实现这两个表的API，并在API 调用完成后执行两个连续的commit：

export default new Vuex.Store({
  state: {
    tasks: [...],
    engagements: [...],
  },
  mutations: {
    updateTask: (state, { taskId, userId }) => {
      // update state.tasks[taskId] however you want here
    },
    updateEngagement: (state, { userId }) => {
      // update state.engagements[userId] however you want here
    },
  },
  actions: {
    async updateTask({ commit }, { taskId, userId }) {
      const prefix = 'http://localhost/';
      try {
        // make API calls here
        const update1 = await axios.post(`${prefix}tasks/complete`, { taskId, userId });
        const update2 = await axios.post(`${prefix}/engagements/update`, { userId });

        // changes made by both commits will appear to user at the same time
        // since commit() is synchronous
        commit('updateTask', { taskId, userId });
        commit('updateEngagement', { userId });
      } catch (e) {
        console.log(`error occurred: ${JSON.stringify(e)}`);
      }
    },
  },
});

【讨论】：