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

【问题标题】：Using vue.js v-show to hide hubspot form使用 vue.js v-show 隐藏 hubspot 表单
【发布时间】：2021-08-30 20:03:09
【问题描述】：

我在使用 vue 的 v-show 显示/隐藏 2 个 hubspot 表单时遇到问题，一次一个，具体取决于当前网站的区域设置/语言（使用 vue i18n）。导航栏负责在语言之间进行切换。

现在两者都在显示，或者都不显示。

到了一个地步，我决定安装 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,
});

以及改变网站区域设置/语言的导航栏的 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>

再一次，我敢打赌，答案非常简单，但我就是不明白。有人吗？

【问题讨论】：

您已经尝试了很多东西，但我没有看到您尝试过我会尝试的第一件事的任何地方：像这样的调试标签...<p>the value of getLangEn is {{getLangEn}}</p> 和相同getLangPt
@danh 我试过了，效果很好。这就是为什么我用头撞墙的原因。即使我有一个表单将 v-show 设置为 true 而另一个设置为 false，它们都会显示。

标签： javascript vue.js vuex hubspot

【解决方案1】：

您在这些元素上使用 Bootstrap d-flex 类，这与所有 Bootstrap d-* 类一样，使用 !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"
>

【讨论】：

谢谢！这就是问题所在，这就是解决方案！