Question

大家好，我是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>

Answer 1

之所以得到Maximum call stack size exceeded是因为您正在AppToggle组件内使用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中。但是，如果可能的话，我建议您改用其他包装。

希望这会有所帮助。

Vue Js使用Toggle显示和隐藏div

1 个答案: