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

今すぐ登録したい方へ

このブログから登録の多いエージェントは下記の３つです★

（リンクをクリックすると公式サイトに飛びます）

✅【ダントツの１位】フォスターフリーランス【案件保有数5000件以上。業界20年の超老舗】

✅【僅差で２位】エミリーエンジニア【４人に１人が初めてのフリーランス】

✅【惜しくも３位】Midworks(ミッドワークス) 【リモート案件が超豊富。正社員並みの保障アリ】

こんにちは、mah(@RailsRubyMah6h)です。

このブログでは、

僕が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 #####')
        })
    }
  }

以上です。

Vue.jsや流行りのTypeScriptを学びたい人へ

Vue.js、TypeScript、React.jsを学習するなら、Udemyの下記のコースがおすすめ★

（自分も全て受講しました）

Vue.js

✅Vue.js + Firebaseで作るシングルページアプリケーション

f:id:mah666hhh:20200815162939p:plain

TypeScriipt

✅ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門

f:id:mah666hhh:20200815162951p:plain

React.js

✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

f:id:mah666hhh:20200815162919p:plain

最後に

下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。

エージェント選びで悩んでいる方は是非参考にしてみてくださいね★

エージェント	詳細	最高単価/月	設立
エミリーエンジニア(emilee)	評判をチェック	100万円/月	2007年
ギークスジョブ	評判をチェック	100万円/月	2007年
フォスターフリーランス	評判をチェック	230万円/月	1996年
PE-BANK(pebank)	評判をチェック	200万円/月	1989年
Midworks(ミッドワークス)	評判をチェック	200万円/月	2013年
レバテックフリーランス	評判をチェック	140万円/月	2005年