[Vuejs]-VueJS list rendering anomaly

by

2👍

✅

For one, you are not finding the roomInstance correctly in the function for that computed property. You should just use the find method and return i.id === this.roomID in the callback instead of i.id = this.roomID:

roomInstance() {
  return this.roomInstances.find(i => i.id === this.roomID);
}

The other issue might be when you are setting roomInstance.messages in the axios.get().then callback. If roomInstance.messages is undefined at that point, you’ll need to use the Vue.set method (aliased on the Vue instance via this.$set) in order to make that property reactive:

this.$set(this.roomInstance, 'messages', resp.data.messages)

Here’s the Vue documentation on Change Detection Caveats.

👤thanksd

Leave a comment