带有“vaadin-grid”的 HTML 数据属性答案

【问题标题】：HTML Data Attribute with `vaadin-grid`带有“vaadin-grid”的 HTML 数据属性
【发布时间】：2018-06-01 13:36:29
【问题描述】：

我正在尝试从网格中获取数据以传递到另一个元素。我在想使用 HTML 数据属性可能是一个很好的方法。

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

但是，数据属性没有设置，我在 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);
}

如何从表格中选择多条数据用于一个函数？

有关更多上下文：我正在尝试从表中获取数据并在 AJAX 调用中作为参数传递。

【问题讨论】：

可能是错字？在日志中，您在paper-button 中设置data-desc 时写了description。你能记录整个数据集吗？
[[item.description]] 设置为 paper-button 文本时在 DOM 中呈现，即 <paper-button>[[item.description]]</paper-button>。
我的意思是：Polymer 将每个data-attrname 映射到dataset.attrname，但在您的第二个代码块中，您在设置data-**desrc** 时记录e.target.dataset.**description**。您是否可以通过像这样记录整个数据集来查看所有数据属性：console.log(e.target.dataset)？

标签： html attributes polymer vaadin-grid dom-repeat

【解决方案1】：

根据@umbo的更正，

事件使用 HTML 属性绑定，而不是 Polymer 元素属性。

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

【讨论】：