[英]Can't clear input within Vaadin-grid?
过去我曾经使用一种方法来使paper-input
空白,但是当与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 = ''
为了在元素的影子DOM中定位动态创建的节点,请使用标准的DOM querySelector
方法:
this.shadowRoot.querySelector(selector)
因此,对于您的问题,请使用this.shadowRoot.querySelector("#keyFilter").value='';
您在上面的代码中犯了一个简单的错误,即为vaadin-grid-filter
和paper-input
元素提供相同的id
名称。 在尝试上面的代码之前,请确保更改此设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.