Binding inputs from parent to child component

Ionic Framework Ionic Vue
1

I’m trying to figure out the proper way to sort this out. Long story short, the parent component has an object:

{
criteria: {
    field: 'name',
    op: 'eq',
    value: 'testing'
  }
}

The child component has some inputs that I want to change the object in the parent for each property field, op, value. I tried using v-model and passing props and all sorts of other tricks but I cannot find the right combination. I’m using Options API btw. Help!

2

I am not a Vue user but in general child to parent communication is handled via emitting events

Like directly or via a store. Maybe good to look that how done in Vue?

Either way I think having the child directly changing data declared in a parent is considered bad practice as it wont allow the framework to detect changes - especially for props contained in an object

And I never go that route because I use immutability as principle - clone the object, change it, emit new version

3

Thanks for the reply. I have looked at the Vue docs and they do mention emitting but my tests haven’t produced the right result. When I emit or change the data on the parent it causes the input to lock up or lose focus so it would appear things aren’t on the same page.

@ldebeasi you are the local Ionic Vue expert. Any thoughts on how to have inputs on a child component that change the data on a parent component? Seems so trivial but can’t get it to work.

4

you are going to need to show more code than that :slight_smile:

I have successfully emitted change events from parent to child to solve this problem.

5

Ugh! I knew someone was going to say that. I just have to find some time to make a small repo for this but I think the problem is emitting change from child (which has the inputs) to the parent (which has the data object). Something I’m doing wrong when trying to link all that together using Ionic Vue. I’ll try to make a small repo example.

6

Ok I figured out my mistake. It came from two places.

  1. I did not have an emit: ['update:field', 'update:op', 'update:value'] on the child component.
  2. On the parent I was looping the child component and the v-bind:key was incorrect. Once I fixed that everything started working fine.

Thanks everyone!

1 Like