manifest/nuxt/components/Pojem.vue

<script setup="setup">

const { etherpadApiUrl, etherpadPrefix } = useRuntimeConfig().public

const store = usePojmiStore()

const props = defineProps({
  naslov: String
})

const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value.id)

await store.naloziPojme()

const urejanje = ref(false)

const urediPojem = async () => {
  // Ustvari pad s tekstom pojma, ce se ne obstaja
  const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${etherpadPrefix + revisionId.value}&text=` + pojem.value.tekst)
  urejanje.value = true
}

</script>

<template>
  <section class="pojem">
    <h2>{{ pojem.naslov }}</h2>
    <div class="tekst" v-html="pojem.tekst" />
    <div class="gumb" @click="urediPojem">Uredi</div>
    <div v-if="urejanje" class="pojem">
      <PojemForm :revisionId="revisionId" />
    </div>
  </section>
</template>