Question

您好，我很好奇是否可以使用相同的表单将数据提交到单独的表中……目前，我的任务表上有一个user_id列，而我的任务上有一个status列表。现在也许有更好的方法了，但是当任务完成时，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
        }) 
      }  
    }
  },

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

谢谢

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

是否可以使用同一表格将数据提交到单独的表？

1 个答案: