Polymer <dom-repeat> data binding to child element not working?

Question

I have a snippit as follows to try to pass a property down to a child element as follows:

<dom-repeat items="{{employees}}" as="employee">
  <template>
    <child-element employee={{employee}}> </child-element> 
  </template>
</dom-repeat>

Where employee is of type array (taken from the Polymer tutorial).

employees: {
   type: Array,
   notify: true,
   value() {
      return [
        {first: 'Bob', last: 'Smith'},
        {first: 'Sally', last: 'Johnson'},
      ];
    }

In my child element, I'm just attempting to print out the passed down property:

<div> <span> {{employee}} </span> </div>

where employee is defined as a

employee: {
    type: String,
    notify: true,
    value: "",
},

However, the values are not passed down when I try to print them out. If I change the value of employee to something else, it gets printed. Why is that? I cannot figure out why that property isn't passed down?

Thank you.

user3015238 · Accepted Answer · 2020-07-23 00:58:13Z

0

Turns out it does work. The problem might have been passing down the entire object to the child element. Changed to only passing the String:

<child-element employee={{employee.first}}> </child-element>

answered Jul 23, 2020 at 0:58

user3015238

254 bronze badges

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

Collectives™ on Stack Overflow

Polymer <dom-repeat> data binding to child element not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related