将动态 v 模型作为函数参数传递

【问题标题】：passing a dynamic v-model as function param将动态 v 模型作为函数参数传递
【发布时间】：2017-06-26 16:27:50
【问题描述】：

我对 vuejs 很陌生，我正在制作一个动态表，其中左列将有一个隐藏的输入，最终将查询数据库并在弹出窗口中显示结果（用于快速交叉引用能力） .我已经做到了使用 v-for 正确构建表的地步，但我不太清楚如何将动态 v-model 绑定到将运行该过程的 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;
        }

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案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>

【讨论】：