如何将vuejs for循环索引值作为HTML按钮onclick javascript函数的参数传递

Question

<div v-for="(grp,idx) in vm">
    <button onclick="addPlant(idx)">
    .......
    </button>
</div>

addPlant（）是 javascript 函数，而不是VueJS方法。

现在如何将idx值传递给javascript方法？

Answer 1

您无法像尝试那样从香草javascript onclick处理程序中引用Vue模板变量。

您应该将索引值传递给Vue @click处理程序，然后从那里调用vanilla javascript方法：

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>

Answer 2

如果我们仅限于您的特定用例，我们可以将index分配给data-label属性（绑定到index）并传递{以{1}}作为参数，this.getAttribute('data-label')指向Html元素，而不是Vue实例或组件：

this

new Vue({
  el: '#app',
  data(){
    return{
      bars:['a','b','c']
    }
  }
  
})

function addPlant(index){
  console.log("# "+index)
}

Answer 3

创建调用javascript函数的Vue方法

methods: {
  callAddPlant: function(idx) {
    addPlant(idx)
  }
}

...

<div v-for="(grp,idx) in vm">
    <button v-on:click="callAddPlant(idx)">
       .......
    </button>
</div>