我是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;
}
答案 0 :(得分:0)
通常情况下,the method bound to a click
会获得该事件,但您可以传递任何您想要的内容(如果您想将其添加到其他参数中,请包含$event
)。
当你说你想“绑定v模型”时,我认为你想要传递当前数据。
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>