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

Question

我在 Vue.js 和 Bootstrap vue 中有一个非常简单的登录页面，我设法在整个页面上很好地实现了 i18n 运行，但是，在主题部分联系表格我有一些选项可供选择（默认值是 "Select one"），我也希望它们被翻译。

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>

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

Vue-i18n translation in script part of component not updating when changing lang

javascript

internationalization

vue.js

vue-i18n

bootstrap-vue