title: this is undefined at axios promise - vuejs
body: <p>Im registering my axios globally and then using it at every component using <code>this.$axios</code>
  I have a <code>save</code> method and <code>items</code> which is an array at my component data.
  At my save method i have this piece of code:</p>
  <pre><code>this.$axios
            .put(`HardwareBoardTracking`, this.items[this.editedIndex])
            .then((res) =&gt; {
              console.log(res);
              this.items[this.editedIndex].actions.forEach((test) =&gt; {
                this.items.forEach((card) =&gt; {
                  if (card.id != this.items[this.editedIndex].id) {
                    this.addnewActionToCard(card, test);
                  }
                });
              });
            })
            .catch((err) =&gt; {
              console.log(&quot;error caught&quot;);
              console.log(err);
  
              Object.assign(this.items[this.editedIndex], elementForFail);
            });
  </code></pre>
  <p>When getting to <code>then</code> block with debugger i can see <code>this</code> is undefined
  This is the error i get:</p>
  <pre><code>Uncaught (in promise) TypeError: Cannot convert undefined or null to object
      at Function.assign (&lt;anonymous&gt;)
  </code></pre>
  <p>for testing purposes i tried to add <code>testMethod</code> and call it from the promise like this:</p>
  <pre><code>    testMethod() {
        console.log(&quot;Test Method&quot;);
        console.log(this);
      },
      save() {
        const elementForFail = { ...this.editedItem };
        if (this.editedIndex &gt; -1) {
          Object.assign(this.items[this.editedIndex], this.editedItem);
          this.items[this.editedIndex].CompletedAllActions = true;
          this.items[this.editedIndex].actions.forEach((element) =&gt; {
            this.addnewActionToCard(this.items[this.editedIndex], element);
          });
          this.$axios
            .put(`HardwareBoardTracking`, this.items[this.editedIndex])
            .then((res) =&gt; {
              console.log(res);
              this.testMethod();
              this.items[this.editedIndex].actions.forEach((test) =&gt; {
                this.items.forEach((card) =&gt; {
                  if (card.id != this.items[this.editedIndex].id) {
                    this.addnewActionToCard(card, test);
                  }
                });
              });
            })
            .catch((err) =&gt; {
              console.log(&quot;error caught&quot;);
              console.log(err);
  
              Object.assign(this.items[this.editedIndex], elementForFail);
            });
  </code></pre>
  <p>And the method is called and inside it it <code>this</code> is defined properly and logged to consol like this:</p>
  <pre><code>VueComponent {...}
  </code></pre>
  <p>I Found this answer <a href="https://stackoverflow.com/a/45217521">https://stackoverflow.com/a/45217521</a> which looks like exactly what i need, But none of the solution works.</p>
  <p>If i try the <code>.bind(this)</code> solution, <code>this</code> is still undefined but it does continue with execution and then i get this error:</p>
  <pre><code>vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: &quot;TypeError: this.$axios.put(...).then(...).bind is not a function&quot;
  </code></pre>
  <p><em><strong>html tag added for colorized code</strong></em></p>