動的なvモデルを関数のパラメータとして渡す

Question

私は非常に新しいvuejsです。左の列には隠れた入力があり、最終的にはデータベースにクエリを出し、結果をポップに表示する動的なテーブルを作成しています（クイック・クロス・レファレンス機能用）。私はそれがv-forを使ってテーブルを適切に構築するまでには至りましたが、動的vモデルをプロセスを実行するjs関数にバインドする方法を理解することはできません。私がこれについて完全に間違った方法をとっているなら、私に知らせてください。乾杯と感謝！

... 
<tr v-for="tableRow in rtnUnsubs"> 
    <td class="unsubCell"> 
    <input name= "[tableRow.share_id]" v-model="[tableRow.share_id]" value="[tableRow.share_id]">{{ tableRow.share_id }} 
    <button v-on:click="getSub">view</button> 
    </td> 
    <td class="unsubCell">{{ tableRow.unsubscriber_type }}</td> 
    <td class="unsubCell">{{ tableRow.unsubscriber_id }}</td> 
</tr> 
... 
<script> 
... 
getSub(/*v-model from input*/) { 
      window.alert(/*do some stuff with v-model*/) 
      return; 
     } 

Answer 1

通常、the method bound to a clickがイベントを取得しますが、あなたはそれが（あなたが他の引数にそれを追加したい場合は$eventを含む）に取得したいものは何でも渡すことができます。

「v-modelsをバインドする」と言いたいときは、現在のデータを渡すことを意味します。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    rows: [{ 
 
     share_id: 'IT ME' 
 
     }, 
 
     { 
 
     share_id: 'THE OTHER ONE' 
 
     } 
 
    ] 
 
    }, 
 
    methods: { 
 
    getSub(data) { 
 
     console.log("Working with", data); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="tableRow in rows"> 
 
    <input name="tableRow.share_id" v-model="tableRow.share_id" value="tableRow.share_id">{{ tableRow.share_id }} 
 
    <button v-on:click="getSub(tableRow.share_id)">view</button> 
 
    </div> 
 
</div>