使用 vue.js v-show 隐藏 hubspot 表单

Question

我在使用 vue 的 v-show 到 show/hide 2 hubspot 形式时遇到了问题，一次一个取决于当前网站 locale/language（使用 vue i18n）。导航栏负责在语言之间切换。

现在两者都在显示，或者 none 个显示。

我决定安装 vuex 来尝试解决问题，但没有成功。

有什么想法吗？

两种形式的vue组件，各有一个div和生成hubspot形式的JS：

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

托管 v-show 布尔值状态的商店：（是的，它完全是 OP，使用 2 个布尔值的状态管理...我很绝望）

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

以及改变网站locale/language的导航栏JS：

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

同样，我敢打赌答案简单得可笑，但我就是不明白。有人吗？

Answer 1

您在这些元素上使用了 Bootstrap d-flex class，这与所有 Bootstrap d-* class 一样用 !important 标记其 display 属性。 Vue v-show 指令通过在元素上切换 display: none 来工作，但它不会用 !important 标记。正如 this Vue issue 中所讨论的，这使得这两种方法不兼容，除非您像这样消除它们的冲突：

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

使用 vue.js v-show 隐藏 hubspot 表单

Using vue.js v-show to hide hubspot form

javascript

vue.js

vuex

hubspot