0

I have a component that represents an option in a form, with data representing the currently selected option. There is a parent component which represents the full form, with a submit button and a reset button. I keep track of what options are currently selected in the form by emitting events from the child to the parent (this is important because the form updates dynamically) .

I'm trying to design the reset button, which clears all fields in the form (sets the currently selected option to an empty string). I would need to modify the data of the child component. Should I do this using a Vue instance as a bus? That seems overkill. Is there a better way to design these components?

user75811
  • 141
  • 1
  • 6
  • You keep track of child data by emitting events from the child to the parent, but what kind of event? Do you use two-way binding via `v-model`? – Kalabasa Jun 15 '18 at 14:18

4 Answers4

0

You can create a custom event to listen to the reset button on each form field. Check out the documentation for this here

tony19
  • 125,647
  • 18
  • 229
  • 307
trevorism
  • 411
  • 2
  • 7
  • Isn't emitting events from parent -> child considered an anti-pattern? I was hoping there was some better design. I believe you can't emit to children actually https://stackoverflow.com/questions/40637288/emit-doesnt-trigger-child-events – user75811 Jun 15 '18 at 14:22
0

I think you want to use sync on the properties your passing into the child component. I use it to load my child component like:

 <textbox :content.sync="new_comment" placeholder="Add a comment..."></textbox>

If you already emitting from your child component then changes to new_comment will automatically be passed through.

Colin Smillie
  • 431
  • 3
  • 7
0

You can find a lot of ways to do this here.

For me, after a lot of playing around with props, i found that the best and safest way is to use this.$refs.

Even if you have more than one child component with the same ref name, you can go through each child with a forEach.

eliod
  • 19
  • 5
-1

Just put a method in the child, perhaps Clear, and call it from the parent. You use $refs in the parent to get to the children.

Joel Lucsy
  • 8,520
  • 1
  • 29
  • 35
  • I looked at refs, but it doesn't seem very dynamic. The number of children is constantly updating and it seems like keeping track of the refswould be difficult. – user75811 Jun 15 '18 at 14:36
  • You could just iterate over all the $refs and call Clear on each of them. Put blank functions in the ones that don't do anything. – Joel Lucsy Jun 15 '18 at 14:41
  • this worked great, thanks. If you give certain children a specific ref tag (e.g. tag all of the form options 'form-option'), you can iterate through only those children from the parent with this.$refs.form-option which should be an array of all of the children – user75811 Jun 15 '18 at 15:05
  • I wasn't aware you could use the same name, but that works out pretty good. Glad to have helped. – Joel Lucsy Jun 15 '18 at 15:08
  • Add an example or at least a link to an example – tno2007 May 31 '19 at 13:19