htmlattributespolymervaadin-griddom-repeat

HTML Data Attribute with `vaadin-grid`

I am trying to get data out of a grid to pass into another element. I was thinking using HTML data attributes may be a good way to do this.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

However, the data attributes don't set and I can't see them in DevTools.

<vaadin-grid items="[[data]]">
  <vaadin-grid-column>
    <template class="header">
      <h3>Favorite</h3>
    </template>
    <template>
      <paper-button on-tap="getData"
        data-id="[[item.itemId]]"
        data-desc="[[item.description]]">Go</paper-button>
    </template>
  </vaadin-grid-column>
</vaadin-grid>

....

getData(e) {
  console.log(e.target.dataset.description);
}

How can I select multiple pieces of data from the table to use in a function?

For more context: I am trying to get data out of the table and pass as parameters in an AJAX call.

Solution

  • Per the correction of @umbo,

    Events use the HTML attribute bindings, and not Polymer element properties.

    getData(e) {
  console.log(e.target.dataset.desc);
}