Trigger Method in Sibling Component Vue JS

Question

need your assistance once again. Here's my situation. VueJS2 (vue-cli project) no Vuex. I have parent component, child1 and child2. child1 is a form that gets data from child2(which is a table). Upon clicking on table row's checkbox in child2, we fill up the form in child1 this is done by event emitting via parent(picture 2). child1 has a button and reset method(see picture 1) to clear its fields. My task is: when I 'uncheck' checkbox in table row child2, form in child1 has to be cleared. How do I do this, specifically, how do I access reset method in child1 from child2 and use that method from child2 basically. I know how to pass data from child to child, but cant get my head around how to be able just manipulate child's data from its sibling. Please help! Thank you in advance!

Can you clarify a bit? A code example would help also. Are you trying to pass a data from child to another child? Or maybe you want to emit an event from one child and listen to it in another child.. — samayo
– samayo, Commented Mar 29, 2018 at 20:24
Just emit another event when the checkbox is unchecked and have that be responsive to the other child component. — Ohgodwhy
– Ohgodwhy, Commented Mar 29, 2018 at 20:26
@samayo have no access to code at the moment. Well, I know how to pass data child - child, but what i need is to use the method reset that already exists in child1(pic), looking for a way to trigger it from child2 without passing any data, just to be able to clear fields in child1 from child2. right now, that reset method does clearing fields but only when i press button clear which is a part of child1. Sorry if its too confusing — YEVY
– YEVY, Commented Mar 29, 2018 at 20:29
@Ohgodwhy have that be responsive to the other child component. who do I do that. I have confused myself, it mustn't be that difficult — YEVY
– YEVY, Commented Mar 29, 2018 at 20:36
in another words, how can I clear child1's form fields from child2 by unchecking checkbox, or pressing button in child2 — YEVY
– YEVY, Commented Mar 29, 2018 at 20:43

samayo · Accepted Answer · 2018-03-29 20:53:22Z

2

If I understand it correctly, you have 2 child components, and you want to tell child1 to execute a method (reset) from your child2 compoent without passing any props.

Well, in that cases your option is limited to using an event Bus.

Check this example. When you click on a button from CompB it executes a methods inside another child component: CompA

var Bus = new Vue()

var compA = {
  data: () => ({ name: 'Primary' }), 
  
  template: `<p> Comp A is: {{name}}</p>`,
  
  methods: {
    reset () {
      this.name = 'RESETED'
    }
  },
  
  created () {
   let self = this;
    Bus.$on('resetA', function (payload) {
      self.reset()
    })
  }
}

var compB = {
  template: `<p> Comp B <button @click="resetCompA"> Clear A </button> </p>`,
  methods: {
    resetCompA () {
      Bus.$emit('resetA')
    }
  }
}

new Vue({
  el: '#app',
  components: {
   'comp-a'  : compA, 
   'comp-b' : compB
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <comp-a></comp-a>
  <comp-b></comp-b>
</div>

answered Mar 29, 2018 at 20:53

samayo

16.5k13 gold badges95 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

YEVY Over a year ago

cant thank you enough! does what i need it to do! Cheers!

Collectives™ on Stack Overflow

Trigger Method in Sibling Component Vue JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related