Struggling with using vue's v-show to toggle between two hubspot forms based on website locale/language (using vue i18n). The navbar controls language switching.
Currently, both forms always show or both are hidden.
Even after trying vuex, the issue persists. Any suggestions?
The vue component includes both forms within divs and the JS for generating 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>
Vuex is being used as a state management solution for the v-show booleans:
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,
});
The navbar's JS manages the website locale/language changes:
<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>
Surely there's a simple answer, but it's eluding me. Any ideas?