Vue3 Reactivity in script setup for translation-CodePudding

I am adding some DOM elements in the script setup side but I want the messages to change when I change the language. I am using vue-i18n plugin. It's easy to do it in the template section because I can basically use the useI18n().t method but how can I do this in the script setup section. Using the useI18n().t method doesn't ensure reactivity.

Example Code:

$(".time")[0].innerHTML = `
<div>0<span>${useI18n().t("details.hour")}</span></div>
<div>0<span>${useI18n().t("details.minute")}</span></div>
<div>0<span>${useI18n().t("details.second")}</span></div>
`

CodePudding user response：

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 >
    <div>0<span>{{time.hour}}</span></div>
    <div>0<span>{{time.minute}}</span></div>
    <div>0<span>{{time.second}}</span></div>
  </div>
</template>