2
votes

Comment passer la valeur d'index vuejs for-loop en tant que paramètre du bouton HTML sur la fonction javascript

<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 vue-component vuejs2

0 commentaires

3 Réponses :

3
votes

Vous ne pouvez pas référencer les variables de modèle Vue à partir d'un gestionnaire onclick javascript vanille comme vous essayez de le faire.

Vous devez passer la valeur d'index à un gestionnaire Vue @click et appeler la méthode javascript vanilla à partir de là:

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

function addPlant(idx) {
  alert(idx)
}

new Vue({
  el: '#app',
  data() {
    return { 
      groups: ['a', 'b', 'c']
    }
  },
  methods: {
    onButtonClick(idx) {
      addPlant(idx)
    }
  }
})

0 commentaires

0
votes

Créez une méthode Vue appelant la fonction javascript

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

...

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

0 commentaires

1
votes

Si nous nous limitons à votre cas d'utilisation spécifique, nous pourrions attribuer index à l'attribut data-label (qui est lié à index ) et passez this.getAttribute ('data-label') comme paramètre, this fait référence à l'élément Html et non à l'instance ou au composant Vue :

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

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

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

0 commentaires