Simple webcomponent with Polymer 2.0: Updating values from dropdown not working

Question

I tried to implement a very basic web component, for learning purposes, with Polymer 2.0. This component should only display the selected value of a select-element, in an h1-element.

<link rel="import" href="../bower_components/polymer/polymer-element.html">


<dom-module id="test-basis">
  <template>
    <style>

    </style>



    <container class="content__column">
      <h2>Test component</h2>

      <div class="table-select-line mono">
        <label class="form-field-label" for="test-key">Tabelle:
          <select class="form-field dropdown" id="tables">
            <option value="printer">My printer</option>
            <option value="color">My color</option>
          </select>
        </label>
      </div>

      <h1 id="abc">[[currentTable]]</h1>
    </container>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TestBasisData extends Polymer.Element {

      constructor() {
        super();
      }

      ready() {
        super.ready();
      }

      static get is() {
        return 'test-component';
      }

      connectedCallback() {
        super.connectedCallback();
        console.log("BasisData created...");
        //create shadow dom
        var shadow = this.shadowRoot;
        this._createTablesListener();
        this._loadData();
        this.currentTable = 'printer';
      }

      static get properties() {
        return {
          data: Object,
          selectedTable: {
            type: String,
            notify: true
          },
          currentTable:{
            type: String,
            notify: true
          }
        }
      }


      static get observers() {
        return [
            '_handleTableUpdate(currentTable)'
        ];
      }

      _createTablesListener(){
        let tables = this.shadowRoot.querySelector("#tables");
        tables.addEventListener("change", this._handleTableSelect);
      }

      _handleTableSelect(item) {
        console.log("item: " + item.target.value);
        this.currentTable = item.target.value;
      }

      _loadData(table = "printer") {
        let p = new Promise((resolve, reject) => {
          resolve(this._loadDataFromService());
        });
        p.then(json => {
          this.data = json;
        }).catch(e => console.log("Cannot load data from service.", e));
      }

      async _loadDataFromService() {
        let p = await fetch("../data.json");
        return await p.json();
      }
    }


    window.customElements.define(TestComponent.is, BasTestisData);
  </script>
</dom-module>

I'm able to get the selected value in the _handleTableSelect listener, but from there: I don't know how to update the currentTable field.

I cannot use this.querySelector("#abc"), as within the _handleTableSelect method: this only refers to the select-element. I also tried the observers, but they are never called.

So I'm somehow stuck on how to tie those ends together.

PS: I tried to work e.g. through Polymer iron-pages, to find out how this is done, but that is even more confusing; as they use e.g. this.items which is nowhere created, assigned or defined within the whole code. But that's probably another question.

Answer 1

try to put value="{{currentTable::input}}"

ex.

<select class="form-field dropdown" id="tables" 
value="{{currentTable::input}}">