Using vue.js v-show to hide hubspot form

Question

I've been having trouble using vue's v-show to show/hide 2 hubspot form, one at a time depending on the current website locale/language(using vue i18n). The navbar is responsible for changing between languages.

Right now both are always showing, or none of them shows.

I came to a point where I decided to install vuex to try to solve the issue, but no success.

Any thoughts?

The vue component with both forms, one in each div and the JS that generates the hubspot forms:

<b-row>
        <b-col class="register-form" md="12">
          <div
            id="registerFormEN"
            v-show="this.getLangEn"
            v-once
            class="d-flex align-items-center justify-content-center"
          ></div>
          <div
            v-show="this.getLangPt"
            v-once
            id="registerFormPT"
            class="d-flex align-items-center justify-content-center"
          ></div>
</b-col>
</b-row>

<script>
import { mapGetters } from "vuex";
import Vue from "vue";
export default {
  name: "Registercourse",
  },
  computed: {
    ...mapGetters(["getLangEn", "getLangPt"])},
mounted() {
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);
    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          region: "na1",
          portalId: "stuff",
          formId: "stuff",
          target: "#registerFormEN",
        });
      }
    });
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);
    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          region: "na1",
          portalId: "stuff",
          formId: "stuff",
          target: "#registerFormPT",
        });
      }
    });
</script>

The store that is hosting the state for the v-show booleans: (Yes, it's completely OP using a state management for 2 booleans... I got desperate)

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    lang: {
      en: true,
      pt: false,
    },
  },
  getters: {
    getLangEn(state) {
      return state.lang.en;
    },
    getLangPt(state) {
      return state.lang.pt;
    },
  },
  mutations: {
    setLangEn(state, en) {
      state.lang.en = en;
    },
    setLangPt(state, pt) {
      state.lang.pt = pt;
    },
  },
  actions: {
    changeLangEn: function({ commit }, params) {
      commit("setLangEn", params);
    },
    changeLangPt: function({ commit }, params) {
      commit("setLangPt", params);
    },
  },
  modules: {},
  strict: false,
});

And the navbar's JS that changes the locale/language of the website:

<script>
import { mapActions } from "vuex";
export default {
  name: "Navbar",
  computed: {
    displayLocale() {
      let other = "PT";
      if (this.$i18n.locale === "pt") {
        other = "EN";
      }
      return other;
    },
  },
  methods: {
    ...mapActions(["changeLangEn", "changeLangPt"]),
    setLocale(locale) {
      this.$i18n.locale = locale;
    },
    switchLocale() {
      if (this.$i18n.locale === "pt") {
        this.$i18n.locale = "en";
        this.$store.dispatch("changeLangEn", true);
        this.$store.dispatch("changeLangPt", false);
        console.log("En to true, Pt to false");
      } else {
        this.$i18n.locale = "pt";
        this.$store.dispatch("changeLangEn", false);
        this.$store.dispatch("changeLangPt", true);
        console.log("Pt to true, En to false");
      }
    },
  },
};
</script>

Again, I bet the answer is something ridiculously simple, but I'm just not getting it. Anyone?

Answer 1

You're using the Bootstrap d-flex class on these elements, which like all of the Bootstrap d-* classes tags its display property with !important. The Vue v-show directive works by toggling display: none on and off the element, but it doesn't tag that with !important. As discussed in this Vue issue, that makes the two approaches incompatible unless you deconflict them like this:

<div
  id="registerFormEN"
  v-show="getLangEn"
  v-once
  :class="{ 'd-flex': getLangEn }"
  class="align-items-center justify-content-center"
>