Vaadinグリッド内の入力をクリアできませんか？

Question

私は過去にpaper-inputを空白にする方法を使用しましたが、通常の方法はVaadin-gridと一緒に使用しても機能しません。

ここに何か不足していますか？

Vaadinグリッド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を試みている：標準DOM querySelectorメソッドを使用し、あなたの要素の影DOMに動的に作成されたノードの位置を特定する

// 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 = '' 

Answer 1

を：

this.shadowRoot.querySelector(selector)

だから、あなたの問題のためにthis.shadowRoot.querySelector("#keyFilter").value='';

を使用すると、あなたはすなわちvaadin-grid-filterとpaper-input要素に同じid名前を提供する上記のコードで単純なミスをしました。上記のコードを試す前にこれを変更してください。