如何将vuejs for-loop索引值作为HTML按钮的参数，单击javascript函数
如何将vuejs for-loop索引值作为HTML按钮的参数，单击javascript函数
提问于 2019-01-08 15:35:40
<div v-for="(grp,idx) in vm">
<button onclick="addPlant(idx)">
.......
</button>
</div>addPlant()是javascript函数，而不是VueJS方法。
现在如何将idx值传递给javascript方法？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-08 15:45:02
您不能像您尝试的那样从普通的javascript onclick处理程序中引用Vue模板变量。
应该将索引值传递给Vue @click处理程序，并从那里调用vanilla方法：
function addPlant(idx) {
alert(idx)
}
new Vue({
el: '#app',
data() {
return {
groups: ['a', 'b', 'c']
}
},
methods: {
onButtonClick(idx) {
addPlant(idx)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(grp, idx) in groups">
<button @click="onButtonClick(idx)">
{{ idx }}
</button>
</div>
</div>
Stack Overflow用户
发布于 2019-01-08 15:50:30
如果我们仅限于您的特定用例，可以将index分配给data-label属性(绑定到index__)并将this.getAttribute('data-label')作为参数传递，this引用的是Html元素，而不是Vue实例或组件：
new Vue({
el: '#app',
data(){
return{
bars:['a','b','c']
}
}
})
function addPlant(index){
console.log("# "+index)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(bar,idx) in bars">
<button :data-label="idx" onclick="addPlant(this.getAttribute('data-label'))">
{{bar}}
</button>
</div>
</div>
Stack Overflow用户
发布于 2019-01-08 15:46:28
创建一个调用javascript函数的Vue方法
methods: {
callAddPlant: function(idx) {
addPlant(idx)
}
}..。
<div v-for="(grp,idx) in vm">
<button v-on:click="callAddPlant(idx)">
.......
</button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54095046
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号