将动态 v 模型作为函数参数传递 [英] passing a dynamic v-model as function param

问题描述

我对 vuejs 非常陌生，我正在制作一个动态表，其中左列将有一个隐藏输入，最终将查询数据库并在弹出窗口中显示结果(用于快速交叉引用能力).我已经做到了使用 v-for 正确构建表的程度，但我不太清楚如何将动态 v-model 绑定到将运行该过程的 js 函数.如果我以完全错误的方式解决这个问题，请告诉我.干杯和感谢！

<代码>...<tr v-for="rtnUnsubs 中的tableRow"><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>...<脚本>...getSub(/*v-model from input*/) {window.alert(/*用v-model做一些事情*/)返回;}

解决方案

通常，绑定到 click 的方法将获得该事件，但您可以传递任何您希望它获得的内容(如果您想，包括 $event将其添加到其他参数中).

当您说要绑定 v-model"时，我认为您要传递当前数据.

new Vue({el: '#app',数据: {行:[{share_id: 'IT ME'},{share_id: '另一个'}]},方法: {获取子(数据){console.log("正在使用", 数据);}}});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script><div id="应用程序"><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)">查看</button>

I am very new to vuejs, and I am working with making a dynamic table where the left column will have a hidden input that will ultimately query a database and display the result in a pop up (for a quick cross referencing ability). I have made it to the point where it builds the table properly with a v-for, but I can't quite figure out how to bind the dynamic v-models to the js function that will run the process. If I am going about this the completely wrong way, please let me know. Cheers and thanks!

...
<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;
        }

解决方案

Ordinarily, the method bound to a click will get the event, but you can pass whatever you want it to get (include $event if you want to add that to other arguments).

When you say you want to "bind v-models", I take it to mean you want to pass the current data.

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>

这篇关于将动态 v 模型作为函数参数传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！