Vue Js show and hide a div with a Toggle

Question

Hey all so I am brand new into the world of Vue.

I am building an app With a Rails API back end and Vue front end.

I am trying use a Toggle Switch (found in this repo Git Hub ) to send true attribute back to my model and open a hidden div on the page.

Right now I am getting these errors and i have no idea how to proceed. I dont think i am understanding their docs as I've read them but not really understanding what i need to do..:

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)

Here is my 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>

and here is my Signup.vue component where the toggle is called:

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

User 28 · Accepted Answer · 2019-05-11 05:39:51Z

You got Maximum call stack size exceeded because of you are using your AppToggle component inside AppToggle component which that cause the recursively call itself.

I'm not sure how do you import this package since I can't find it on npm. It seems the author of this package want us to copy TailwindToggle.vue manually.

So your AppToggle.vue would be:

// Same as TailwindToggle.vue

<template>
  ...
</template>

<script>
  ...
</script>

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

And your Signup.vue would be:

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

...

I'm not sure this will works since the style of TailwindToggle seems have to import some pieces from somewhere else (not sure). If it not working may be you can looking at its dist file and copy involved style and paste it into yours AppToggle.vue. But if it possible I would recommend you to another package instead.

Hope this helps.

Collectives™ on Stack Overflow

Vue Js show and hide a div with a Toggle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related