[Vuejs]-Vue3 Reactivity in script setup for translation

by

3👍

✅

Manipulating DOM directly inside the script leads to inconsistence in your app, you should drive your component by different reactive data to achieve your goal.
In your current situation try to define a computed property based on the translation then render it inside the template based on its different properties :

<script setup>


const {t} =useI18n()

const time = computed(()=>{
  return {
    hour: t("details.hour"),
    minute: t("details.minute"),
    second: t("details.second"),
  }
})

</script>
<template>
  <div class="time">
    <div>0<span>{{time.hour}}</span></div>
    <div>0<span>{{time.minute}}</span></div>
    <div>0<span>{{time.second}}</span></div>
  </div>
</template>
👤Boussadjra Brahim

Leave a comment