CODEWITHSUNDEEP
javascriptpolymer-2.xdom-repeat
NeitoFR
NeitoFR

Reputation: 807

Polymer 2 queryselector doesn't work

I try to add an eventlistener to some dynamically created elements, but i cannot target them.

//here is how I try to access it
_buildTable(data)
{
    this.$.spinner.style.display = 'none';
    this.tableHead = Object.keys(data[0]);
    this.tableData = data;
    this._test();//It is called theorically after that the data has been filled
}
_test()
{   
    var link = this.shadowRoot.querySelectorAll(".link");
    //var link = Polymer.dom(this.root).querySelectorAll(".link"); //tried this but i think it is Polymer 1.x style
    //var link = document.querySelectorAll(".link"); // I tried this
    
    console.log(link);
}
<!-- Here is the HTML dom-repeat -->
<tbody>
    <template is="dom-repeat" items="{{tableData}}" as="data">
        <tr>
            <td class="link">{{data.id_Mission}}</td>
            <td>{{data.nom}}</td>
            <td>{{data.resume}}</td>
        </tr>
    </template>
  </tbody>
What am I missing,

Have a nice evening/night/day everyone

Upvotes: 1

Views: 113

Answers (1)

mishu
mishu

Reputation: 5397

You are calling _test after tableData is saved, but the elements don't get stamped into the page, as the execution thread goes to the method you are calling, and will actually render them when it can. To confirm if this is the issue, try "sending to the background" your method call, have it called with a delay, but "as soon as possible", but using setTimeout.

So your method would be:

  _buildTable(data)
  {
    this.$.spinner.style.display = 'none';
    this.tableHead = Object.keys(data[0]);
    this.tableData = data;
    setTimeout(() => {
      this._test();
    });
  }

Upvotes: 1

Related Questions