Passing a changing value from 1 webcomponent into another

Issue

I have 2 webcomponents, which have the same linked value

<my-input value="{{data}}"></my-input>
<my-output value="{{data}}"></my-output

So that way, when i change a paper input in my-input it will change the attribute value in my-output accordingly.

The issue is that nothing ends up displaying, even on the basecase of output being:

<div>Data: {{value}}</div>

so it seems that the variable isnt linked to both components.

the data variable is defined as:

@property String data;

Solution

in the definition in the components for value you need to have:

@Property(notify:true)
String value;

so that way it propagates up. It seems that without this, it just stops the propagation. This will then push the changed value up a level to the parent data variable.

As a follow on: It is only needing to notify if the variable itself is changed inside of the Web Component. That is dependent entirely on your design.

Answered By – Fallenreaper

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *