vuei18n =>转换数组在setup()中正在进行<template/>转换，需要额外的步骤/加载来呈现，我如何解决它？

Question

抱歉，“额外的步骤/负载”部分，我知道这是相当模糊的，肯定是一个糟糕的词选择。我将用代码和2幅图像向你们展示我的意思。第一次：

​

代码：

<template>
  <div class="bg-white">
    <h1
      class="text-4xl font-semibold my-10 text-center capitalize text-black dark:text-white"
    >
      {{ t('FAQ.title') }}
    </h1>
    <div class="space-y-4 mx-auto my-4 max-w-screen-lg">
      <details class="group" v-for="faq in faqs" :key="faq.question">
        <summary
          class="flex items-center list-none text-left justify-between p-4 rounded-lg cursor-pointer"
        >
          <h5 class="font-medium text-black">{{ faq.question }}</h5>
          <svg
            class="flex-shrink-0 ml-1.5 w-5 h-5 transition duration-500 group-open:-rotate-180"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </summary>

        <ul v-if="faq.list">
          <li
            class="px-4 my-2 ml-4 leading-relaxed text-secondary"
            v-for="answer in faq.answer"
            :key="answer"
          >
            {{ answer }}
          </li>
        </ul>

        <p class="px-4 my-2 ml-4 leading-relaxed text-secondary" v-else>
          {{ faq.answer }}
        </p>
      </details>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'FAQ',
  setup() {
    const { t } = useI18n()
    const faqs = [
      {
        question: t('FAQ.questions[0]'),
        answer: t('FAQ.answers.answer1')
      },
      {
        question: t('FAQ.questions[1]'),
        answer: [
          t('FAQ.answers.answer2[0]'),
          t('FAQ.answers.answer2[1]'),
          t('FAQ.answers.answer2[2]'),
          t('FAQ.answers.answer2[3]'),
          t('FAQ.answers.answer2[4]')
        ],
        list: true
      },
      {
        question: t('FAQ.questions[2]'),
        answer: t('FAQ.answers.answer3')
      },
      {
        question: t('FAQ.questions[3]'),
        answer: t('FAQ.answers.answer4')
      },
      {
        question: t('FAQ.questions[4]'),
        answer: t('FAQ.answers.answer5')
      },
      {
        question: t('FAQ.questions[5]'),
        answer: t('FAQ.answers.answer6')
      },
      {
        question: t('FAQ.questions[6]'),
        answer: t('FAQ.answers.answer7')
      },
      {
        question: t('FAQ.questions[7]'),
        answer: t('FAQ.answers.answer8')
      },
      {
        question: t('FAQ.questions[8]'),
        answer: t('FAQ.answers.answer9')
      },
      {
        question: t('FAQ.questions[9]'),
        answer: t('FAQ.answers.answer10')
      },
      {
        question: t('FAQ.questions[10]'),
        answer: t('FAQ.answers.answer11')
      },
      {
        question: t('FAQ.questions[11]'),
        answer: t('FAQ.answers.answer12')
      }
    ]
    return { faqs, t }
  }
})
</script>

如您所见，模板中只有t()。问题是，要呈现所有其余的元素，我必须更改标志并转到页面的另一部分，然后返回，这是我的意思。反正我能解决这个问题吗？

Answer 1

为了使其余的问题和答案随着标题的变化而改变，有两种方法可以修复它。

第一种方法是像这样翻译模板中的问题和答案：

{{ t(faq.question) }}

第二种方法是使faqs成为一个计算属性，以便每当t更改时它就会更新。