[Vuejs]-Call a function in a different vue component from v-for @click method

by

0👍

The recommended way to approach this in Vue is with emitting custom events or vuex. Seems like you’re looking for the custom event approach. With this method, you would emit a custom event with a payload from component A, listen to that event in the parent component, and then update the prop of component B, and setup a watch in component B that would respond when the prop changes and call a method.

This article explains it well:

https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation

The most important parts are:

//emit from component A
this.$emit('update-cart', item)

//setup listener in parent
<componentA @update-cart="updateCart">
updateCart(e) {
    this.cart.push(e);
    this.total = this.shoppingCartTotal;
  },

//setup componentB with prop from parent
<componentB :total="total">

//have watch in componentB
props: ['total'],
watch:{
  total:function(val){
    //call fn with new val
  }
}

Leave a comment