vue.js - How to pass vuejs for-loop index value as the parameter of HTML button onclick javascript function - Stack Overflow

admin管理员组

文章数量:1391960

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

addPlant() is a javascript function and not a VueJS method.

How can I pass the idx value to the javascript method now?

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

addPlant() is a javascript function and not a VueJS method.

How can I pass the idx value to the javascript method now?

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Aug 31, 2020 at 9:37 Boussadjra Brahim 1 asked Jan 8, 2019 at 15:35 Pavan G RPavan G R 31633 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can't reference the Vue template variables from a vanilla javascript onclick handler like you're trying to do.

You should pass the index value to a Vue @click handler and call the vanilla javascript method from there:

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./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>

If we go to be limited to your specific use case we could assign index to data-label attribute (which is bound to index) and pass this.getAttribute('data-label') as parameter, this refers to the Html element not to the Vue instance or ponent:

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

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

<script src="https://cdnjs.cloudflare./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>

Create a Vue method calling the javascript function

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

...

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

本文标签：