Vue.jsでボタンが複数ある場合のそれぞれの処理を書きたい

Question

Vue.js、JavaScript、htmlの初心者です。練習で、以下のページを書いています。

HomePage.vue

<template>
  <div id="home-page">
    <GlobalHeader />
    <GlobalMessage />

    <!-- メインエリア -->
    <main class="container mt-5 p-5">
      <p class="h5 mb-5">ホーム</p>
      <b-form v-on:submit.prevent="submitSave">
        <div class="row form-group">
          <label class="col-sm-3 col-form-label">ユーザー名</label>
          <div class="col-sm-8">
            <b-input
              type="text"
              class="form-control"
              v-model="form.account.login_id"
            />
          </div>
        </div>
        <div class="row form-group">
          <label class="col-sm-3 col-form-label">パスワード</label>
          <div class="col-sm-8">
            <b-input
              type="text"
              class="form-control"
              v-model="form.account.pw"
            />
          </div>
        </div>
        <div class="row text-center mt-5">
          <div class="col-sm-12">
            <b-button type="submit" variant="primary">
              {{ "登録" }}
            </b-button>
          </div>
        </div>
        <div class="row text-center mt-5">
          <div class="col-sm-12">
            <b-button type="submit" variant="primary">
              {{ "更新" }}
            </b-button>
          </div>
        </div>
        <div class="row text-center mt-5">
          <div class="col-sm-12">
            <b-button type="submit" variant="primary">
              {{ "削除" }}
            </b-button>
          </div>
        </div>
      </b-form>
    </main>

    <!-- デバッグ -->
    <div class="m-5">
      <pre>form: {{ form }}</pre>
      <pre>state: {{ this.$store.state }}</pre>
    </div>
  </div>
</template>

<script>
import api from "@/services/api";
import GlobalHeader from "@/components/GlobalHeader.vue";
import GlobalMessage from "@/components/GlobalMessage.vue";

export default {
  components: {
    GlobalHeader,
    GlobalMessage
  },
  data() {
    return {
      // 入力フォームの内容
      form: {
        account: {
          login_id: "",
          pw: 0
        }
      }
    };
  },
  methods: {
    // 登録ボタン押下
    submitSave: function() {
      api({
        method: "post",
        url: "/users/",
        data: {
          login_id: this.form.account.login_id,
          pw: this.form.account.pw,
        }
      }).then(response => {
        const message = "登録しました。";
        this.$store.dispatch("message/setInfoMessage", { message: message });
        this.form.account = response.data;
      });
    }
  }
};
</script>

「ユーザー名」と「パスワード」を持ったテーブルに対してCRUD操作をするページを書きたいと思っています。現在、このページには「登録」、「更新」、「削除」の3つのボタンを用意しています。このボタンを押したときにAPIでテーブル操作をする処理を書きたいのですが、参考にした書籍はボタンが1つしかなかったため、ボタンが複数ある場合の書き方がわからず困っています。今、「登録」、「更新」、「削除」のボタンを用意していますが、どれを押しても「methods」に書かれた「post」の処理が実行されます。put（更新）と、delete（削除）を実行する以下の処理を追加したいです。ボタンが複数ある場合の書き方について教えていただきたいです。

put

      api({
        method: "put",
        url: "/users/" + this.form.account.login_id + "/",
        data: {
          login_id: this.form.account.login_id,
          pw: this.form.account.pw,
        }
      }).then(response => {
        const message = "更新しました。";
        this.$store.dispatch("message/setInfoMessage", { message: message });
        this.form.account = response.data;
      });

delete

      api({
        method: "delete",
        url: "/users/" + this.form.account.login_id + "/",
        data: {
          login_id: this.form.account.login_id,
          pw: this.form.account.pw,
        }
      }).then(response => {
        const message = "削除しました。";
        this.$store.dispatch("message/setInfoMessage", { message: message });
        this.form.account = response.data;
      });

Answer 1

v-on:click="onClick1" を付加し、実行するメソッド名を指定することで修正が完了しました。

<template>
  <div id="home-page">
    <GlobalHeader />
    <GlobalMessage />

    <!-- メインエリア -->
    <main class="container mt-5 p-5">
      <p class="h5 mb-5">ホーム</p>
      <b-form v-on:submit.prevent="submitSave">
        <div class="row form-group">
          <label class="col-sm-3 col-form-label">ユーザー名</label>
          <div class="col-sm-8">
            <b-input
              type="text"
              class="form-control"
              v-model="form.account.login_id"
            />
          </div>
        </div>
        <div class="row form-group">
          <label class="col-sm-3 col-form-label">パスワード</label>
          <div class="col-sm-8">
            <b-input
              type="text"
              class="form-control"
              v-model="form.account.pw"
            />
          </div>
        </div>
        <div class="row text-center mt-5">
          <div class="col-sm-12">
            <b-button type="submit" variant="primary" name="button1" v-on:click="onClick1">
              {{ "登録" }}
            </b-button>
          </div>
        </div>
        <div class="row text-center mt-5">
          <div class="col-sm-12">
            <b-button type="submit" variant="primary" name="button2" v-on:click="onClick2">
              {{ "更新" }}
            </b-button>
          </div>
        </div>
        <div class="row text-center mt-5">
          <div class="col-sm-12">
            <b-button type="submit" variant="primary" name="button3" v-on:click="onClick3">
              {{ "削除" }}
            </b-button>
          </div>
        </div>
      </b-form>
    </main>

    <!-- デバッグ -->
    <div class="m-5">
      <pre>form: {{ form }}</pre>
      <pre>state: {{ this.$store.state }}</pre>
    </div>
  </div>
</template>

<script>
import api from "@/services/api";
import GlobalHeader from "@/components/GlobalHeader.vue";
import GlobalMessage from "@/components/GlobalMessage.vue";

export default {
  components: {
    GlobalHeader,
    GlobalMessage
  },
  data() {
    return {
      // 入力フォームの内容
      form: {
        account: {
          login_id: "",
          pw: 0
        }
      }
    };
  },
  methods: {
    // 登録ボタン押下
    onClick1: function() {
      api({
        method: "post",
        url: "/users/",
        data: {
          login_id: this.form.account.login_id,
          pw: this.form.account.pw,
        }
      }).then(response => {
        const message = "登録しました。";
        this.$store.dispatch("message/setInfoMessage", { message: message });
        this.form.account = response.data;
      });
    },
    onClick2: function() {
      api({
        method: "put",
        url: "/users/" + this.form.account.login_id + "/",
        data: {
          login_id: this.form.account.login_id,
          pw: this.form.account.pw,
        }
      }).then(response => {
        const message = "更新しました。";
        this.$store.dispatch("message/setInfoMessage", { message: message });
        this.form.account = response.data;
      });
    },
    onClick3: function() {
      api({
        method: "delete",
        url: "/users/" + this.form.account.login_id + "/",
        data: {
          login_id: this.form.account.login_id,
          pw: this.form.account.pw,
        }
      }).then(response => {
        const message = "削除しました。";
        this.$store.dispatch("message/setInfoMessage", { message: message });
        this.form.account = response.data;
      });
    }
  }
};
</script>