I'm a newcomer to Vue and have carefully studied the documentation for Vue and Vuex. However, I am currently facing an issue which is hindering my progress. Although I believe I can figure it out eventually, I want to approach it with clean and best practices in mind.
The Scenario: - I have entities - I have users - An entity can belong to multiple users
What I aim to achieve is to display a list of all users where those assigned to the entity are checked.
My Vuex store looks like this:
export default new Vuex.Store({
state: {
users: [],
entities: []
},
getters: {
USERS: state => state.users,
ENTITIES: state => state.entities,
ENTITY: state => id => {
return state.entities.find(entity => entity.id == id)
}
},
mutations: {
SET_USERS: (state, payload) => {
state.users = payload
},
SET_ENTITIES: (state, payload) => {
state.entities = payload
},
UPDATE_DEVICE: (state, payload) => {
state.entities = state.entities.map(entity => {
if(entity.id === payload.id){
return Object.assign({}, entity, payload.data)
}
return entity
})
}
},
actions: {
GET_USERS: async (context) => {
let { data } = await Axios.get('/api/v1/users')
context.commit('SET_USERS', data)
},
GET_ENTITIES: async (context) => {
let { data } = await Axios.get('/api/v1/entities')
context.commit('SET_ENTITIES', data)
},
UPDATE_ENTITY: ({commit}, payload) => {
Axios.put('/api/v1/entities/' + payload.id + '/', payload.data).then((response) => {
commit('UPDATE_ENTITY', payload)
});
}
}
})
My Entity Component fetches the users from the store using the created hook. The entity's data is retrieved from the store through the computed property entity(). Similarly, the list of all users is served by the computed property users().
created(){
if(!this.$store.getters.USERS.length) this.$store.dispatch('GET_USERS')
},
computed: {
entity(){
const entityId = this.$route.params.id
return this.$store.getters.ENTITY(entityId)
},
users(){
return this.$store.getters.USERS
}
}
In the template, I display all users along with a checkbox:
<ul>
<li v-for="(user, i) in users" :key="i">
<input type="checkbox" :value="user" :id="'user_'+i" :name="'user_'+i" v-model="???" />
<label :for="'user_'+i">{{user.name}}</label>
</li>
</ul>
Additionally, within the same component's template, I have a second list displaying all users belonging to the entity. This list should be kept in sync with the 'selectable list'. Therefore, all users with checked checkboxes should also be listed in this section:
<ul>
<li v-for="user in entity.users" :key="user.id">
{{user.name}}
</li>
</ul>
My current roadblock lies in determining whether to use a computed property for device.users, incorporating get() and set(), and utilizing it as v-model on the checkboxes. I attempted this approach but encountered issues since the user objects in the all-users list did not match the objects in the device.users list, despite representing the same users. At this point, I feel that I might be making the process more complex than necessary and potentially overlooking a more conventional Vue solution.
To cut the long story short, what would be the optimal way to tackle this task? I believe it's a fairly common challenge in Vue.
Thank you for any guidance provided, and if more code or details are needed, I will gladly supply them!