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

I have a pretty simple landing page in Vue.js and Bootstrap vue and I managed to get i18n running pretty well on the whole page, however, on the subject part of the contact form I have some options to choose from (with a default value that says "Select one"), that I also want them to be translated.

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,
};}}

However when I change languages, the whole landing page updates the language but the options do not!

Is there something I missed?

Thanks in advance!

2 answers

  • answered 2020-06-02 10:36 Hiws

    Data isn't smart enough to know that you locale changed.

    You can instead create a computed property, which unlike data can detect and recompute when your language changes.

    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
        }
      }
    }
    

  • answered 2020-06-02 11:00 LuisPLSP

    The answer from Hiws did the job but I'm leaving down below how the template looks like if anyone is after something similar:

    <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>