[Vuejs]-How to show active state on hover/focus in two elements at the same time in Vue.js/Vuex

by

0👍

why should "hasFocus" be stored in vuex? is there a need to be?
if not, you should move it to ResidenceItem.vue‘s data().
i think it is a just temporary state on vue.

<router-link
  :class="{
    'has-focus': focused,
  }"
  @mouseenter.native.stop="focused = true"
  @mouseout.native.stop="focused = false"
  @focus.native.stop="focused = true"
  @focusout.native.stop="focused = false"
  […]
>
...

data() {
  return {
    focused: false,
  };
},
...

if hasFocus is needed in vuex (which i think it is a bad idea), you should use normal vuex state to store like focusedResidenceId: null.

I can provide more detail explanation if you need. Please let me know if you so.

Leave a comment