Можно ли отправить данные в отдельные таблицы, используя одну и ту же форму? - PullRequest
Новая
       7

Можно ли отправить данные в отдельные таблицы, используя одну и ту же форму?

0 голосов
/ 09 октября 2018

Привет, мне любопытно, можно ли отправлять данные в отдельные таблицы, используя одну и ту же форму ... В настоящее время у меня есть столбец 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
        }) 
      }  
    }
  },

Если я далеко от базы, пожалуйста, дайте мне знать.

Спасибо

1 Ответ

0 голосов
/ 10 октября 2018

Из описания проблемы кажется, что вы хотите отправить одно единственное действие на vuex, чтобы обновить две разные таблицы на вашем бэкэнде, и хотите, чтобы изменения были обновлены для пользователя одновременно.

Если это так, вы можете добиться этого с action, который POST для вашего API для обеих таблиц, и выполнить два последовательных commit после завершения вызовов API: 

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