Trouble mutating an array with data fetched from axios in polymer 2

Question

I am experimenting with Polymer 2 for work related reasons. I decided to make an infinite scroll. So far I know how to do it in other frameworks (such as VUE) but I am having a little bit of trouble with polymer

The idea is to fetch some dummy data from https://randomuser.me/

The app loads a component called "infinitescroll-component"; it doesn't have any other element.

it fetches and pushes the data to the initial array without any trouble. Once you get to the end of the window, it triggers an event that should load one more user an push it into the initial array and render it again. But it fails to do so.

This is my code:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

<dom-module id="infinitescroll-component">
  <template>
    <style>
      :host {
        display: block;
        margin: 15px;
      }
    </style>


    <template is="dom-repeat" items="[[users]]" as="user">
      <p>[[user.name.first]]</p>
      <p>[[user.name.last]]</p>
      <hr>
    </template>
  </template>

  <!-- Importing Axios  -->
  <!-- <script src="node_modules/axios/dist/axios.min.js"></script> why it doesnt work?-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- General Script -->
  <script>
    class InfiniteScroll extends Polymer.Element {
      static get is() {
        return 'infinitescroll-component';
      }
      static get properties() {
        return {

          users: {
            type: Array,
            value: function () {
              return [];
            }
          },
          arrayControl: {
            type: Array,
            value: function () {
              return ['uno'];
            }
          },
          controlador: {
            type: String,
            value: 'soy un controlador'
          }
        }
      }



      // Hook de inicio
      connectedCallback() {
        super.connectedCallback();
        this.getInitialUsers();
      }

      getInitialUsers() {
        axios.get(`https://randomuser.me/api/?results=20`).then((response) => {
          this.users = response.data.results;
        });
      }

      // -------------------------------------

      ready() {
        super.ready();
        window.addEventListener('scroll', this.scrollDetection);
        console.log(this.controlador);
        console.log('ready ' + this.arrayControl);

      }

      funcionPrueba() {
        this.push('arrayControlador', this.controlador);
        console.log('esto es el array de control ' + this.arrayControl);
      }

      scrollDetection() {

        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
        if (bottomOfWindow) {
          axios.get(`https://randomuser.me/api/?results=`).then(response => {
            //   PUSHING DATA INTO USERS ARRAY
            console.log("axios Loads");
          });


          console.log("End of Scroll");
        }
      }


    }

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

thanks in advance

tried this.users.push = response.data.results;

this.push('users',response.data.results);

---

I am expecting to push the data into the array of users once the user reaches the end of the windows via scrolling-

Answer 1

OK, I found the error.

I had to bind 'this' so it wouldn't miss the scope

 window.addEventListener('scroll', this.scrollDetection.bind(this));

then add the mutation method as:

        this.push("users", response.data.results[5]);

Hope this helps anyone in the future