[Vuejs]-Vue 3 SPA. Select emits lang and contentStore DOESN'T renew content ONLY in mobile devices

by

1👍

The problem was actually in the way I tried to use < select > with Vue v-for directive. V-model and, highly likely, similar operators don’t work inside < option > tags and have to be used inside < select > itself. Strangely, however, that the whole thing was working on desktop and not throwing any error, even the case is well-documented.

Nevertheless, this is the final code. Hope it will help someone with a similar problem.

  1. I had to add a ref lang to my NavigationLanguageSelect.vue
import { ref } from 'vue'

const lang = ref(localStorage.getItem('lang') || navigator.language.slice(0, 2))
  1. I used v-model to reference lang with the selected option and emit lang on change:
    <select
      @change="emit('changeLang', lang)"
      v-model="lang"
      class="p-1 text-sm rounded-lg text-gray-700"
    >
      <option class="block px-4 py-2 hover:bg-gray-100" disabled>
        {{ currentFlag }} {{ currentText }}
      </option>
      <option
        class="block px-4 py-2 hover:bg-gray-100"
        v-for="language in langs"
        :key="language.text"
        :value="language.value"
      >
        {{ language.flag }} {{ language.text }}
      </option>
    </select>
👤Oleg Rybnikov

Leave a comment