更改语言时，组件脚本部分的Vue-i18n翻译不更新。

Question

我有一个非常简单的Vue.js和Bootstrap vue的登陆页面，我设法让i18n在整个页面上运行得很好，然而，在联系表单的主题部分，我有一些选项可供选择（默认值是 "选择一个"），我也希望它们被翻译。

import i18n from "@/i18n";

export default {
data() {
return {
  errors: [],
  form: {
    email: "",
    subject: null,
    message: "",
  },
  subject: [
    { text: i18n.t("contact.subjectoption"), value: null },
    this.$t("contact.subjectoption1"),
    "Business Inquiry",
    "Social Media",
    "Other",
  ],
  msg: "",
  show: true,
};}}

然而，当我改变语言时，整个登陆页面更新了语言，但选项却没有！我是否有遗漏什么？

我是不是漏掉了什么？

先谢谢你

Answer 1

Data还不够聪明，不知道你的locale变了。

你可以创建一个计算属性，它不像数据可以检测和重新计算当你的语言变化。

export default {
  computed: {
    subject() {
      return [
        { text: this.$t("contact.subjectoption"), value: null },
        this.$t("contact.subjectoption1"),
        "Business Inquiry",
        "Social Media",
        "Other"
      ]
    }
  }
  data() {
    return {
      errors: [],
      form: {
        email: "",
        subject: null,
        message: ""
      },
      msg: "",
      show: true
    }
  }
}

Answer 2

Hiws的答案已经完成了工作，但我在下面留下了模板的样子，如果有人在寻找类似的东西。

<section class="contact">
  <b-container>
    <b-row class="my-md-5">
      <b-col
        id="contact-us"
        class="my-3 d-flex align-items-center justify-content-center"
        md="6"
      >
        <h1 class="mb-5 contact-title">{{ $t("contact.title") }}</h1>
      </b-col>
      <b-col class="contact-form" md="6">
        <b-form @submit="checkForm">
          <div class="form">{{ $t("contact.emailtitle") }}</div>
          <b-form-input
            id="email"
            v-model.trim="form.email"
            type="email"
            required
            placeholder="Email"
          ></b-form-input>
          <div class="form">{{ $t("contact.subjecttitle") }}</div>
          <b-form-select
            id="subject"
            v-model="form.subject"
            :options="subject"
            required
          ></b-form-select>

          <div class="form">{{ $t("contact.messagetitle") }}</div>
          <b-form-textarea
            id="message"
            v-model.trim="form.message"
            required
            placeholder="Message"
          ></b-form-textarea>
          <b-button
            class="form"
            style="margin-right: 10px;"
            type="submit"
            variant="success"
            >{{ $t("contact.submit") }}</b-button
          >
        </b-form>
      </b-col>
    </b-row>
  </b-container>
</section>