53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
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" 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;
|
|
}
|
|
|
|
.drugiJeziki > div {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
img {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
</style>
|