[Vuejs]-Maintain associated objects in Vue

by

1👍

✅

How does the structure of entity look? Assuming they have an array ‘users’, you could calculate the value for the checkbox by providing a basic javascript function that checks if that user’s unique ID is in the list for this entity.

In computed make a new property (so you don’t recalculate the same array for every element in v-for):

userIdsWithEntity() {
  if (!this.entity) return [];  // necessary in case entity hasn't been instantiated yet
  return this.entity.users.map(x => x.id)
}

Then provide a simple function to the checkbox value that returns true or false: :value="userIdsWithEntity.includes(user.id)"

Instead of v-model (which is :value and @input/@change to update the property provided in :value rolled into one directive, so you might get conflicts with your :value definition), use @change to handle the (un)checking of the checkbox, dispatching an action to vuex to remove/add that user to the entity.

👤Excalibaard

Leave a comment