スリ飯屋MaLankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

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

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




今すぐ案件紹介をご希望の方へ


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

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

【ダントツの1番人気】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】フリエン(furien)【実務経験1年未満でも案件アリ!】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




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


このブログでは、

僕が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.jsTypeScriptReact.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




最後に


下記の表に、

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


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


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




あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech