【Vue.js】clickで実行されるmethodsに引数を渡す

この記事の結論3行まとめ

• Vue.jsでは@clickやv-onを使い、関数に引数を渡すことで柔軟なイベント処理が可能。
• methodsで引数を受け取り、APIリクエストなどの処理に動的に値を組み込める。
• クリックイベントに引数を渡す方法を活用することで、効率的かつ直感的なUI操作が実現できる。

こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。

このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。

今回は、

• 【Vue.js】methodsに引数を渡す

について書いていきます。

【Vue.js】clickで実行されるmethodsに引数を渡す

クリックで実行される関数に、引数を渡したい。

1、v-onもしくは@clickで指定する関数に、

v-on:click="someFunction(引数)"

@click="someFunction(引数)"

のように引数を設定する。

// component.vue

<td><b-button pill variant="primary" @click="deleteTask(task.id)">Delete Task</b-button></td>

2、methods側の関数で、

function(1で設定した引数)

のようにして受け取れる。

// component.vue

methods: {
    deleteTask: function(task_id) {
    // 省略
    }
}

3、あとは使うだけ。

下記の例では、

axiosでリクエストするURLに、引数で受け取ったtaskのidを入れている。

// component.vue

methods: {
    deleteTask: function(task_id) {
      axios
        .delete(`/api/tasks/${task_id}`)
        .then((res) => {
          console.log('##### SUCCESS! #####')
         }, (error) => {
          console.log('##### ERROR #####')
        })
    }
  }

以上です。