代码之家 › 专栏 › 技术社区 › Shawn Wilson

Vue Js使用切换显示和隐藏div

vue-component vue.js

Shawn Wilson · 技术社区 · 5 年前

大家好,我是Vue的新成员。

我正在用Rails API后端和Vue前端构建一个应用程序。

我正在尝试使用切换开关(在本回购协议中找到) Git Hub )将true属性发送回我的模型,并在页面上打开一个隐藏的div。

现在我遇到了这些错误,我不知道如何继续。我不认为我理解他们的文件,因为我读过他们的文件,但不真正理解我需要做什么

vue.esm.js?efeb:1897 RangeError: Maximum call stack size exceeded
    at VueComponent.Vue._render (vue.esm.js?efeb:3553)
    at VueComponent.updateComponent (vue.esm.js?efeb:4069)
    at Watcher.get (vue.esm.js?efeb:4482)
    at new Watcher (vue.esm.js?efeb:4471)
    at mountComponent (vue.esm.js?efeb:4076)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:9057)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:11953)
    at init (vue.esm.js?efeb:3127)
    at createComponent (vue.esm.js?efeb:5983)
    at createElm (vue.esm.js?efeb:5930)


vue.esm.js?efeb:1897 RangeError: Maximum call stack size exceeded
    at VueComponent.Vue._render (vue.esm.js?efeb:3553)
    at VueComponent.updateComponent (vue.esm.js?efeb:4069)
    at Watcher.get (vue.esm.js?efeb:4482)
    at new Watcher (vue.esm.js?efeb:4471)
    at mountComponent (vue.esm.js?efeb:4076)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:9057)
    at VueComponent.Vue.$mount (vue.esm.js?efeb:11953)
    at init (vue.esm.js?efeb:3127)
    at createComponent (vue.esm.js?efeb:5983)
    at createElm (vue.esm.js?efeb:5930)

这是我的 AppToggle.vue

<template>
  <div>
    <AppToggle v-model="isToggleOn" onText="Hide Map" offText="Show Map"/>
  </div>
</template>

<script>
export default {
  name: "AppToggle",
  data() {
    return {
      isToggleOn: true
    };
  }
};
</script>

这是我的 Signup.vue 调用切换的组件:

<template>
... Some form stuff up here...
<app-toggle @click.prevent="toggleSmsDiv()"/>
<div id="smsDiv" v-if="isToggleOn">TEST DIV ITEMS</div>
... More form stuff down here...
</template>
<script>
import AppToggle from "@/components/AppToggle";
export default {
  name: "Signup",
  components: {
    AppToggle
  },
  data() {
    return {
      isToggleOn: false,
      first_name: "",
      last_name: "",
      email: "",
      password: "",
      password_confirmation: "",
      error: ""
    };
  },
  created() {
    this.checkSignedIn();
  },
  updated() {
    this.checkSignedIn();
  },
  methods: {
    toggleSmsDiv() {
      this.isToggleOn = !this.isToggleOn;
    },
    signup() {
      this.$http.plain
        .post("/signup", {
          email: this.email,
          password: this.password,
          password_confirmation: this.password_confirmation
        })
        .then(response => this.signupSuccessful(response))
        .catch(error => this.signupFailed(error));
    },
    signupSuccessful(response) {
      if (!response.data.csrf) {
        this.signupFailed(response);
        return;
      }
      localStorage.csrf = response.data.csrf;
      localStorage.signedIn = true;
      this.error = "";
      this.$router.replace("/products"); // Change this to User Dashboard
    },
    signupFailed(error) {
      this.error =
        (error.response && error.response.data && error.response.data.error) ||
        "Something went wrong. Please try again.";
      delete localStorage.scrf;
      delete localStorage.signedIn;
    },
    checkSignedIn() {
      if (localStorage.signedIn) {
        this.$router.replace("/products"); //Change this to User Dashboard
      }
    }
  }
};
</script>

<style>
</style>

0 回复 | 直到 5 年前

User 28 5 年前

你有 Maximum call stack size exceeded 因为你在使用你的 AppToggle 内部组件 应用切换 导致递归调用自身的组件。

我不知道你怎么导入这个包,因为我在npm上找不到它。看来这个包裹的作者想让我们复制 TailwindToggle.vue 手动。

所以你的 AppToggle.vue 将是:

// Same as TailwindToggle.vue

<template>
  ...
</template>

<script>
  ...
</script>

<style lang="postcss"> // Make sure you Vue config support postcss` language
  ...
</style>

还有你的 Signup.vue 将是:

<template>
  ...
  <AppToggle v-model="isToggleOn" onText="Hide Map" offText="Show Map"/>
  <div id="smsDiv" v-if="isToggleOn">TEST DIV ITEMS</div>
  ...
</template>

...

我不确定这是否有效,因为 TailwindToggle 似乎必须从其他地方进口一些物品(不确定)。如果它不起作用,你可以查看它的dist文件,复制相关样式并粘贴到你的文件中 AppToggle。vue .但如果可能的话,我建议你换一个包裹。

希望这有帮助。