0

Im registering my axios globally and then using it at every component using this.$axios I have a save method and items which is an array at my component data. At my save method i have this piece of code:

this.$axios
          .put(`HardwareBoardTracking`, this.items[this.editedIndex])
          .then((res) => {
            console.log(res);
            this.items[this.editedIndex].actions.forEach((test) => {
              this.items.forEach((card) => {
                if (card.id != this.items[this.editedIndex].id) {
                  this.addnewActionToCard(card, test);
                }
              });
            });
          })
          .catch((err) => {
            console.log("error caught");
            console.log(err);

            Object.assign(this.items[this.editedIndex], elementForFail);
          });

When getting to then block with debugger i can see this is undefined This is the error i get:

Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)

for testing purposes i tried to add testMethod and call it from the promise like this:

    testMethod() {
      console.log("Test Method");
      console.log(this);
    },
    save() {
      const elementForFail = { ...this.editedItem };
      if (this.editedIndex > -1) {
        Object.assign(this.items[this.editedIndex], this.editedItem);
        this.items[this.editedIndex].CompletedAllActions = true;
        this.items[this.editedIndex].actions.forEach((element) => {
          this.addnewActionToCard(this.items[this.editedIndex], element);
        });
        this.$axios
          .put(`HardwareBoardTracking`, this.items[this.editedIndex])
          .then((res) => {
            console.log(res);
            this.testMethod();
            this.items[this.editedIndex].actions.forEach((test) => {
              this.items.forEach((card) => {
                if (card.id != this.items[this.editedIndex].id) {
                  this.addnewActionToCard(card, test);
                }
              });
            });
          })
          .catch((err) => {
            console.log("error caught");
            console.log(err);

            Object.assign(this.items[this.editedIndex], elementForFail);
          });

And the method is called and inside it it this is defined properly and logged to consol like this:

VueComponent {...}

I Found this answer https://stackoverflow.com/a/45217521 which looks like exactly what i need, But none of the solution works.

If i try the .bind(this) solution, this is still undefined but it does continue with execution and then i get this error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: this.$axios.put(...).then(...).bind is not a function"

html tag added for colorized code

ATT
  • 921
  • 3
  • 13
  • 30
  • You don't need `bind` as you are already using one of the solutions mentioned in linked answer - arrow function. There is probably something else going wrong because if `this` is undefined inside `then`, then you would not be able to call `this.testMethod();` – Michal Levý Oct 15 '20 at 11:17
  • The error in this line `Object.assign(this.items[this.editedIndex], elementForFail)`. it means your `this.items[this.editedIndex]` or `elementForFail` is `null` or `undefined`. publish some mock data to test it – oboshto Oct 15 '20 at 11:17
  • Also [be careful](https://vuejs.org/v2/guide/reactivity.html#For-Objects) using `Object.assign()` with Vue... – Michal Levý Oct 15 '20 at 11:22
  • @MichalLevý, I know there something wrong but this is the fact, The method does get called but the i get this is undefined at the next statement. – ATT Oct 15 '20 at 11:48
  • @oboshto The error coming from this line: this.items[this.editedIndex].actions.forEach((test) = {...}). 'this' is undefined – ATT Oct 15 '20 at 11:49
  • In your function, first line, add `let that = this`. Use `that` instead of this inside your arrow functions. `that.testMethod();` for example. You lose the reference of `this` in an arrow function in vue js. – NaceurBouhamed Oct 15 '20 at 12:53
  • @NaceurBouhamed. I tried that, Something weird happens. i put 'let that = this;' one line above 'this.$axios' and in the then block i replaced all this with that. But before the axios.put. the property that.editedIndex = -0 and inside the block that.editedIndex = -1 and then i get error because of trying to access array at index -1 that.items[that.editedIndex]. Other properties such as that.items are the same. – ATT Oct 15 '20 at 13:24

0 Answers0