Item selection like in Gmail?

Question

Vue.js

There is a certain list with n-th quantity of elements (for example the list of chats). With a long press on any of the elements, something like checkable mode is turned on and the elements can be checked (ie the mechanics are the same as in mobile gmail). Now, when you mark an element, its local state changes (marked = true) and, based on this state, a check mark is drawn, and the element itself is added to the markedItems field (this.$store.state.markedItems.push(this.$store.state.items [markedelementIndex])). But it turns out that the marked elements in the store are not reactively associated with the interface, i.e. if I make this.$store.markedItems = [] using some third-party method, then visually marked items will remain marked. The question is how and where is it better to reactively store information that an element is checked? Interested in more advice?

Answer 1

Start by making your elements work with the v-model directive and not with their local state.
Next, link v-model to the store.
Something like this jsfiddle.net/1eun3agx