simplesmiler
commented
7 years ago Hi, thanks for the report.
This happens because in Vue 2 directives receive changes every time the component updates (as opposed to receiving updates when the actual value changes, as it was in Vue 1). So all v-focus directives that have current value being true are "fighting" for the focus, and the last one (in DOM order) always wins (which leads to focus not being able to switch from the last item to the first).
This behavior was also causing https://github.com/simplesmiler/vue-focus/issues/8, so the .lazy modifier was introduced to mimic Vue 1 behavior. Incidentally, it helps in your situation too: https://jsfiddle.net/7sdnq7gs/3/
Regarding two-way binding. Two-way binding (except for v-model) in discouraged by Vue 2, and there's no support for writing two-way bound directives.
See here: https://jsfiddle.net/7sdnq7gs/1/
It is supposed to focus zero, one, two, three, four, five and start over but gets stuck at five. Why might that be? If I manually remove focus from five (by clicking somewhere else), it works for another round and again gets stuck at five.
Also I see that vue-focus used to have two-way binding for focus, why is it removed? The reason I ask is that I've been trying to achieve dynamic focus from model AND update of the focus state if focus is gained from mouse actions of the user with vue but it has proven to be very challenging. (it is a dynamic recursive component structure so using indexes is not an option) So I got curious about why support was removed.