无法清除 Vaadin-grid 中的输入？答案

【问题标题】：Can't clear input within Vaadin-grid?无法清除 Vaadin-grid 中的输入？
【发布时间】：2017-08-22 11:31:48
【问题描述】：

我过去曾使用过一种方法将paper-inputs 设为空白，但是当与Vaadin-grid 结合使用时，我常用的方法不起作用。

我错过了什么吗？

Vaadin-grid HTML

<vaadin-grid-column>
    <template class="header">
        <div class="horizontal layout cell">
            <label for="keyFilter" class="keyText cell flex">Key</label>
            <vaadin-grid-filter class="cell" id="keyFilter" path="key" value="[[_filterKey]]">
                  <paper-input no-float-label class="keyFilter" id="keyFilter" slot="filter" placeholder="Filter search" value="{{_filterKey::input}}" focus-target on-input="clearAppear" >
                        <iron-icon suffix icon="clear" class="clearIcon" on-click="clearField" clear-item-id="keyFilter"></iron-icon>
                 </paper-input>
             </vaadin-grid-filter>
        </div>
    </template>
    <template class="cell">[[item.key]]</template>
</vaadin-grid-column>

我尝试了以下JS：

// Attempt 1 - gives "undefined" within the dev tools 
this.$.keyFilter.value = '';

// Attempt 2 - finds the correct element, but does not set the value to blank
document.getElementById('keyFilter').value = ''

【问题讨论】：

标签： javascript html polymer vaadin vaadin-grid

【解决方案1】：

要在元素的影子 DOM 中定位动态创建的节点，请使用标准 DOM querySelector 方法：

this.shadowRoot.querySelector(selector)

所以，对于您的问题，请使用this.shadowRoot.querySelector("#keyFilter").value='';

您在上面的代码中犯了一个简单的错误，即为vaadin-grid-filter 和paper-input 元素提供相同的id 名称。请务必在尝试上述代码之前更改此设置。

【讨论】：