web-dev-qa-db-ja.com

Vue Jsで動的関数名をクリックイベントに渡す方法

パラメータから関数名を渡す方法はありますか？

このようなもの..

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="item.click(item.contactID)" >

</tr>

item.clickは、ページのレンダリング中に対応する関数として変換されません。正しい提案は何ですか？

vue.jsdynamicform
6
Tony Tom

動的関数呼び出しを使用するには、関数名を受け取り、対応する関数を呼び出すヘルパー関数を用意することをお勧めします。

handle_function_call(function_name) {
    this[function_name]()
},

そしてテンプレートからアイテムを反復するとき、あなたは次のように関数名を渡すことでその関数を呼び出すことができます

<button v-for="button of items"
       :key="button.id" 
       @click="handle_function_call(button.fn_name)" //=> note here
>
  {{ button.text }}
</button>

実際に見る jsfiddle

2
roli roli

@click = "[fuctionName]（$ event、index）"

例：

<button v-for="(button,index) in items" @click="[fuctionNames[index]]($event, index)" > // consider fuctionNames array of Function Names.
1
Anoop chaudhary

イベントでデータを渡すことができます

または、v-modelで読み取り専用の入力フィールドを取ります

例：

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="itemClick" >

</tr>  

new Vue({
  ...
  ...
  methods:{
    itemClick:function(event){
       console.log(event.target.value);
    }
  }
})
0
Emtiaz Zahid