Polymer 2.0 dom-repeat passing parameters

Question

Quite new to Polymer so this is hopefully a simple question, but why do I have an output inside the slot "handle" and not one for the parameter has-arrow? Works fine when I just write the value in, as I do with position and expand-on, but I want them all to be dynamic from my Polymer.Element. Any thoughts?

<template is="dom-repeat" items="{{headers}}" as="header">
    <th scope="col">
        <juicy-popover expand-on="click" position="beforetop center" has-arrow="[[header.hasArrow]]"> <!-- Nothing here -->
            <div slot="expandable">
                [[header.tooltip]]
            </div>
            <div slot="handle">
                [[header.title]]<br>
                [[header.hasArrow]] <!-- Displays here! -->
            </div>
        </juicy-popover>
    </th>
</template>

Script

class PolymerTable extends Polymer.Element {
  static get is() { return 'polymer-table'; }
  static get properties() {
    return {
      headers: {
        type: Array,
        value() {
          return [
            {},
            {
                tooltip: 'Displays headers',
                title: 'Headers',
                position: 'beforetop center, beforetop left',
                expandOn: 'hover',
                hasArrow: 'true'
            },
            {
                tooltip: 'If this option is on, user can use regular expressions in route URI',
                title: 'Use regular expression',
                position: 'beforetop center',
                expandOn: 'hover',
                hasArrow: 'false'
            },
            {
                tooltip: 'If this option is on, surface nesting is allowed',
                title: 'Allow surface nesting',
                position: 'beforetop center',
                expandOn: 'hover',
                hasArrow: 'true'
            },
            {
                tooltip: 'If this option is on, this row is enabled',
                title: 'Enabled',
                position: 'beforetop center, beforetop beforeright',
                expandOn: 'hover',
                hasArrow: 'true'
            }
          ];
        },
        notify: true
      }
    };
  }
}

UPDATE

It has nothing to do with calling a function or reading a property. It's simply about outputting a variable into a parameter.

I tried putting this before the juicy-popover.

<div test="{{index}}" testing="testing"></div>

Which gives the result:

<div testing="testing" class="style-scope polymer-table"></div>

Answer 1

Instead of has-arrow=[[header.hasArrow]], you should call a class method and pass in the index of the dom-repeat, such as has-arrow=[[_hasArrow(index)]]

_hasArrow(index) {
  return this.headers[index].hasArrow;
}

CAUTION: The value won't be correct if you filter or sort the items in dom-repeat. They need to match the order of the property headers.