Как мне получить доступ к входному значению столбца vaadin-grid-filter-column в моем Javascript? - PullRequest
Новая
       47

Как мне получить доступ к входному значению столбца vaadin-grid-filter-column в моем Javascript?

0 голосов
/ 08 октября 2019

Я работаю над приложением 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 это возможно (см. Ниже), но я не смог выяснить это с помощью vaadin-grid-filter-column .

Рабочий пример работы vaadin-grid-filter из документации : 

    <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>
...