更改lang时不更新组件脚本部分的Vue-i18n翻译

Question

我在Vue.js和Bootstrap中有一个非常简单的登陆页面，我设法使i18n在整个页面上运行得相当好，但是，在联系人表单的主题部分，我有一些选项可供选择(默认值为"Select“)，我也希望它们被翻译。

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

数据不够聪明，无法知道您的区域设置发生了变化。

相反，您可以创建一个计算属性，与数据不同的是，该属性可以在语言更改时检测和重新计算。

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>