0
async fetch() {
    try {
      console.log(await this.$api.events.all(-1, false)); // <-- First log statement
      const res = await this.$api.events.all(-1, false); // <-- Assignment
      console.log(res); // <-- Second log statement
      if (!this.events) {
        this.events = []
      }
      res.data.forEach((event, index) => {
        const id = event.hashid;
        const existingIndex = this.events.findIndex((other) => {
          return other.hashid = id;
        });
        if (existingIndex == -1) {
          this.events.push(events);
        } else {
          this.events[existingIndex] = event;
        }
      });
      for (var i = this.events.length - 1; i >= 0; --i) {
        const id = this.events[i].hashid
        const wasRemoved =
          res.data.findIndex((event) => {
            return event.hashid == id
          }) == -1
        if (wasRemoved) {
          this.events.splice(i, 1)
        }
      }
      this.$store.commit('cache/updateEventData', {
        updated_at: new Date(Date.now()),
        data: this.events
      });
    } catch (err) {
      console.log(err)
    }
  }

// The other functions, maybe this somehow helps

async function refreshTokenFirstThen(adminApi, func) {
  await adminApi.refreshAsync();
  return func();
}

all(count = -1, description = true) {
  const func = () => {
    return $axios.get(`${baseURL}/admin/event`, {
      'params': {
        'count': count,
        'description': description ? 1 : 0
      },
      'headers': {
        'Authorization': `Bearer ${store.state.admin.token}`
      }
    });
  }
  if (store.getters["admin/isTokenExpired"]) {
      return refreshTokenFirstThen(adminApi, func);
  }
  return func();
},

Both log statements are giving slightly different results even though the same result is expected. But this only happens when is use the function in this specific component. When using the same function in other components, everything works as expected.

First data output:

[
  {
    "name": "First Name",
    "hashid": "VQW9xg7j",
    // some more correct attributes
  },
  {
    "name": "Second name",
    "hashid": "zlWvEgxQ",
    // some more correct attributes
  }
]

While the second console.log gives the following output:

[
  {
    "name": "First Name",
    "hashid": "zlWvEgxQ",
    // some more correct attributes, but this time with reactiveGetter and reactiveSetter
    <get hashid()>: reactiveGetter()
​​        length: 0
​​​​        name: "reactiveGetter"
​​​​        prototype: Object { … }
        ​​​​<prototype>: function ()
    ​​​<set hashid()>: reactiveSetter(newVal)
        ​​​​length: 1
        ​​​​name: "reactiveSetter"
        ​​​​prototype: Object { … }
        ​​​​<prototype>: function ()
  },
  {
    "name": "Second name",
    "hashid": "zlWvEgxQ",
    // some more correct attributes and still without reactiveGetter and reactiveSetter
  }
]

As it can be seen, somehow the value of my hashid attribute changes, when assigning the response of the function call.

The next weird behavior happening here, is that the first object where the hashid field changes also gets reactiveGetter and reactiveSetter (but the second object in the array does not get these).

So it looks to me like something is happening with the assignment that I don't know about. Another guess would be that this has something to do with the Vuex store, because I do not change the Vuex tore in the other place where I use the same function.

It is verified that the backend always sends the correct data, as this is dummy data, consisting of an array with two objects with some attributes. So no other data except this two objects is expected.

Can someone explain to me why this behavior occurs?

1 Answer 1

1

There are few problems...

  1. Do not use console.log with objects. Browsers tend to show "live view" of object - reference

  2. this.events.findIndex((other) => { return other.hashid = id; }); is wrong, you are using assignment operator (=) instead of identity operator (===). That's why the hashid of the first element changes...

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.