问题
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;
}
回答1:
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>
来源:https://stackoverflow.com/questions/44764293/passing-a-dynamic-v-model-as-function-param