manifest/nuxt/components/IzborJezika.vue

<script setup="setup">

const store = useNastavitveStore()

const izbraniJezik = computed(() => store.izbraniJezik)
const kodeJezikov = computed(() => Object.keys(store.mozniJeziki))
const kodeDrugihJezikov = computed(() => kodeJezikov.value.filter(
  (jezik) => jezik !== store.izbraniJezik
))
const slikaJezika = (jezik) => `/images/jezik_${jezik}.png`

// console.log('izbrani jezik!', izbraniJezik.value)

const izbor = ref(false)

</script>

<template>
  <div class="izbor">
    <div class="jezik" @click="izbor = !izbor">
      <img :src="slikaJezika(izbraniJezik)" /> {{ store.mozniJeziki[izbraniJezik] }}
    </div>

    <div class="drugiJeziki" v-if="izbor">
      <div class="jezik" :class="`jezik-${jezik}`" v-for="jezik in kodeDrugihJezikov" @click="() => { store.izberiJezik(jezik); izbor = false }">
        <img :src="slikaJezika(jezik)" /> {{ store.mozniJeziki[jezik] }}
      </div>
    </div>
  </div>
</template>

<style>

.izbor {
  width: 10rem;
  cursor: pointer;
}

.jezik {
  display: flex;
  align-items: center;
}

.jezik-de img,
.jezik-hr img {
  transform: scaleX(-1);
}

.drugiJeziki > div {
  margin-top: 5px;
}

img {
  margin-right: 5px;
}

</style>