Question

我正在研究Polymer 3应用程序，作为其中一部分，我使用了vaadin-grid。我想使用过滤功能，并且有一个vaadin-grid-filter-column组件用于简单过滤。它可以过滤前端视图中的数据，但我还无法弄清楚如何以编程方式实际访问关联的Javascript代码中的输入值。

我已经尝试基本添加id和value标记，并尝试使用DOM属性访问输入，但是我不想使用某些直接的HTML标记方法-我更希望了解Vaadin本身提供对可访问标签的支持。例如，我也尝试过：

            <vaadin-grid-filter-column auto-width path="name" value=[[name]]>

以及：

            <vaadin-grid-filter-column auto-width path="name" value={{name}}>

两者都不允许我实际打印输入的值。

<vaadin-grid aria-label="Basic Binding Example" items="[[items]]" class="height-480px" theme="row-stripes compact">
            <vaadin-grid-filter-column auto-width click="{{detailsOpened}}" path="name">
              <template class="header">Name</template>
              <template>[[item.name]]</template>
              <template class="footer">Name</template>
            </vaadin-grid-filter-column>
</vaadin-grid>

为了尝试输出该值，我在文件中将以下代码定义为Javascript：

static get properties() {
    return {
      name: {
        type: string,
        observer: "_printName"
      },
    }

  _printName() {
    console.log(this.name)
  }

基本上，每当我尝试访问输入时，我都会得到一个空值，但这主要是因为我没有得到正确的变量来打印。我在 vaadin-grid-filter 的一些文档中已经看到了这种可能性（请参阅下文），但是我无法通过 < em> vaadin-grid-filter-column 。

有效的vaadin-grid-filter示例from documentation：

    <vaadin-grid-column>
      <template class="header">
        <vaadin-grid-filter aria-label="First Name" path="name.first" value="[[_filterFirstName]]">
          <input placeholder="First Name" value="{{_filterFirstName::input}}" focus-target>
        </vaadin-grid-filter>
      </template>
      <template>[[item.name.first]]</template>
    </vaadin-grid-column>

如何在Javascript中访问vaadin-grid-filter-column的输入值？

0 个答案: