{"action":"created","issue":{"url":"https://api.github.com/repos/euvl/vue-js-modal/issues/99","repository_url":"https://api.github.com/repos/euvl/vue-js-modal","labels_url":"https://api.github.com/repos/euvl/vue-js-modal/issues/99/labels{/name}","comments_url":"https://api.github.com/repos/euvl/vue-js-modal/issues/99/comments","events_url":"https://api.github.com/repos/euvl/vue-js-modal/issues/99/events","html_url":"https://github.com/euvl/vue-js-modal/issues/99","id":264257609,"number":99,"title":"$ref undefined after closing","user":{"login":"atmar","id":8886661,"avatar_url":"https://avatars2.githubusercontent.com/u/8886661?v=4","gravatar_id":"","url":"https://api.github.com/users/atmar","html_url":"https://github.com/atmar","followers_url":"https://api.github.com/users/atmar/followers","following_url":"https://api.github.com/users/atmar/following{/other_user}","gists_url":"https://api.github.com/users/atmar/gists{/gist_id}","starred_url":"https://api.github.com/users/atmar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/atmar/subscriptions","organizations_url":"https://api.github.com/users/atmar/orgs","repos_url":"https://api.github.com/users/atmar/repos","events_url":"https://api.github.com/users/atmar/events{/privacy}","received_events_url":"https://api.github.com/users/atmar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-10-10T14:48:22Z","updated_at":"2017-10-10T14:56:19Z","closed_at":null,"author_association":"NONE","body":"Hello, \r\n\r\nAfter the 'closed' event is fired, the $ref changes to 'undefined', giving me the following error : \r\n```\r\nclient.js:50 TypeError: Cannot read property 'show' of undefined\r\n    at VueComponent.showAuthModal (http://localhost:3000/_nuxt/layouts/default_nobg.af149a8269c959d47fb4.js:881:28)\r\n    at boundFn (http://localhost:3000/_nuxt/common.17362cb3a494aa9cf32f.js:5562:14)\r\n    at VueComponent.invoker (http://localhost:3000/_nuxt/common.17362cb3a494aa9cf32f.js:7200:18)\r\n    at VueComponent.Vue.$emit (http://localhost:3000/_nuxt/common.17362cb3a494aa9cf32f.js:7710:18)\r\n    at VueComponent.Vue.(anonymous function) [as $emit] (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:359:28)\r\n    at VueComponent.showAuthModal (http://localhost:3000/_nuxt/layouts/default_nobg.af149a8269c959d47fb4.js:1279:12)\r\n    at Proxy.boundFn (http://localhost:3000/_nuxt/common.17362cb3a494aa9cf32f.js:5562:14)\r\n    at click (http://localhost:3000/_nuxt/layouts/default_nobg.af149a8269c959d47fb4.js:2407:23)\r\n    at HTMLSpanElement.invoker (http://localhost:3000/_nuxt/common.17362cb3a494aa9cf32f.js:7200:18)\r\n```\r\n\r\nI didn't have this while developing this feature, it's only now, a few weeks later that I've noticed. I tried previous versions of the files that I know worked in the past, but no success. The only difference is that I did an 'npm update' to update everything. I've tried previous versions of this plugin but the result was the same. Currently trying different vuejs versions. I've been searching for hours but I don't know what changed that broke it. (Also I'm using Nuxt for ssr)\r\n\r\nHeaderBar.vue:\r\n```\r\n<template>\r\n  <header>\r\n    </div-->\r\n    <div class=\"pusher\">\r\n      <div class=\"ui container\">\r\n        <div class=\"header-main\">\r\n          <div class=\"ui grid\">\r\n            <div class=\"three wide computer fourteen wide mobile column\">\r\n              <nuxt-link class=\"menu-brand\" to=\"/\"> <img src=\"/images/logo.png\" alt=\"\"></nuxt-link>\r\n            </div>\r\n            <div class=\"seven wide computer fourteen wide mobile column\">\r\n              <search ref=\"search\">\r\n                <template slot=\"item\" scope=\"option\">\r\n                  <div class=\"ui small image\">\r\n                    <img :src=\"`${$store.state.imageUrl}/assets/img/products/header/260x121/${option.image}`\">\r\n                  </div>\r\n                  <div class=\"content\">\r\n                    <div class=\"header\">{{ option.name }}</div>\r\n                    <div class=\"meta\">\r\n                      <img :src=\"option.game_platform\" class=\"image-icon\">\r\n                    </div>\r\n                  </div>\r\n                </template>\r\n              </search>\r\n            </div>\r\n            <div class=\"six wide computer fourteen wide mobile column\">\r\n              <div class=\"right-side-wrapper\">\r\n                <div v-if=\"!isAuthenticated\" class=\"wrap user\">\r\n                  <span class=\"login\" @click=\"showAuthModal()\" key=\"login\">\r\n                    Log In\r\n                  </span>\r\n                  <span class=\"register\" @click=\"showAuthModal()\" key=\"register\">\r\n                    Register\r\n                  </span>\r\n                </div>\r\n                <div v-else class=\"wrap user\">\r\n                  <nuxt-link to=\"/account/orders\">\r\n                    <span>My Account</span>\r\n                  </nuxt-link>\r\n                </div>\r\n                <cart></cart>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"menu-main\">\r\n          <nuxt-link class=\"menu-item\" to=\"/\">Home</nuxt-link>\r\n          <nuxt-link class=\"menu-item\" to=\"/games\">Store</nuxt-link>\r\n          <div class=\"menu-item\">\r\n            Best Selling\r\n          </div>\r\n          <div class=\"menu-item\">\r\n            Featured Games\r\n          </div>\r\n          <div class=\"menu-item\">\r\n            Support\r\n          </div>\r\n          <recent-viewed></recent-viewed>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <auth-modal ref=\"authModal\"></auth-modal>\r\n  </header>\r\n</template>\r\n\r\n<script>\r\n\r\nimport Search from '~/components/layout/header/Search.vue'\r\nimport RecentViewed from '~/components/layout/header/RecentViewed.vue'\r\nimport Cart from '~/components/layout/header/Cart.vue'\r\n\r\nimport AuthModal from '~/components/modals/AuthModal.vue'\r\n\r\nexport default {\r\n  components: {\r\n    Search, RecentViewed, Cart, AuthModal\r\n  },\r\n\r\n  computed: {\r\n    isAuthenticated() {\r\n      return this.$store.getters['auth/isAuthenticated']\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    showAuthModal() {\r\n      this.$refs.authModal.show()\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n```\r\n\r\nAuthmodal.vue\r\n```\r\n<template>\r\n  <modal name=\"auth\" :adaptive=\"true\" :minHeight=\"515\" :width=\"360\" @before-close=\"beforeClose\" @opened=\"opened\">\r\n    <div class=\"login-page\">\r\n      <div class=\"types\">\r\n        <div class=\"auth-type\" :class=\"{ 'active': type == 'login'}\" @click=\"type = 'login'\">\r\n          Sign In\r\n        </div>\r\n        <div class=\"auth-type\" :class=\"{ 'active': type == 'register' }\" @click=\"type = 'register'\">\r\n          Register\r\n        </div>\r\n      </div>\r\n      <div class=\"form\">\r\n\r\n        <form v-if=\"type == 'login'\" class=\"login-form\" :key=\"'login'\" @submit.prevent=\"login\">\r\n          <input v-model=\"email\" type=\"email\" name=\"email\" placeholder=\"Email Address\" required />\r\n          <input v-model=\"password\" type=\"password\" name=\"password\" placeholder=\"Password\" required />\r\n\r\n          <div v-if=\"invalidCredentials\" class=\"invalid-cred\">\r\n            <span>Invalid username or password, try again</span>\r\n          </div>\r\n          <button type=\"submit\" :disabled=\"pendingRequest\">Sign In\r\n            <div v-show=\"pendingRequest\" style=\"margin-left:5px\" class=\"ui active mini inverted inline loader\"></div>\r\n          </button>\r\n          <p class=\"message\">Not registered?\r\n            <span @click=\"type = 'register'\">Create an account</span>\r\n          </p>\r\n        </form>\r\n\r\n        <form v-else class=\"register-form\" :key=\"'register'\" @submit.prevent=\"register\">\r\n          <input v-model=\"email\" type=\"email\" placeholder=\"Email Address\" required/>\r\n          <div class=\"error-label\" v-if=\"errors.email\">{{ generateErrors(errors.email) }}</div>\r\n\r\n          <input v-model=\"password\" type=\"password\" placeholder=\"Password\" required/>\r\n          <span class=\"small-text\">Password must be atleast 5 characters</span>\r\n          <div class=\"error-label\" v-if=\"errors.password\">{{ generateErrors(errors.password) }}</div>\r\n\r\n          <input v-model=\"confirmPassword\" type=\"password\" placeholder=\"Confirm Password\" required/>\r\n          <div class=\"error-label\" v-if=\"!samePasswords\">Passwords do not match</div>\r\n\r\n          <button type=\"submit\" :disabled=\"pendingRequest\">Create\r\n            <div v-show=\"pendingRequest\" style=\"margin-left:5px\" class=\"ui active mini inverted inline loader\"></div>\r\n          </button>\r\n          <p class=\"message\">Already registered?\r\n            <span @click=\"type = 'login'\">Sign In</span>\r\n          </p>\r\n        </form>\r\n\r\n        <div class=\"ui horizontal divider\">\r\n          Or\r\n        </div>\r\n\r\n        <div class=\"social-buttons\">\r\n\r\n          <div class=\"soc-button\">\r\n            <div class=\"media-icon steam\">\r\n              <i class=\"steam icon\"></i>\r\n            </div>\r\n            <div class=\"button steam\">\r\n              Sign In with Steam\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"soc-button\">\r\n            <div class=\"media-icon fb\">\r\n              <i class=\"facebook f icon\"></i>\r\n            </div>\r\n            <div class=\"button fb\">\r\n              Sign In with Facebook\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"soc-button\">\r\n            <div class=\"media-icon google\">\r\n              <i class=\"google icon\"></i>\r\n            </div>\r\n            <div class=\"button google\">\r\n              Sign In with Google\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </modal>\r\n</template>\r\n\r\n<script>\r\n\r\nimport { generateErrors } from '~/utils/tools' // eslint-disable-line no-unused-vars\r\n\r\nexport default {\r\n\r\n  data() {\r\n    return {\r\n      type: 'login',\r\n      email: null,\r\n      password: null,\r\n      confirmPassword: null,\r\n      samePasswords: true,\r\n      invalidCredentials: false,\r\n      pendingRequest: false,\r\n      errors: []\r\n    }\r\n  },\r\n  computed: {\r\n  },\r\n\r\n  methods: {\r\n    login() {\r\n      this.invalidCredentials = false\r\n      this.pendingRequest = true\r\n\r\n      this.$store.dispatch('auth/login', {\r\n        email: this.email,\r\n        password: this.password\r\n      }).then((data) => {\r\n        this.hide()\r\n\r\n        this.invalidCredentials = false\r\n        this.pendingRequest = false\r\n      }).catch(() => {\r\n        this.invalidCredentials = true\r\n        this.pendingRequest = false\r\n      })\r\n    },\r\n    register() {\r\n      this.errors = []\r\n      if (!this.checkPasswords()) {\r\n        return\r\n      }\r\n      this.pendingRequest = true\r\n\r\n      this.$store.dispatch('auth/register', {\r\n        email: this.email,\r\n        password: this.password,\r\n        confirmPassword: this.confirmPassword\r\n      }).then((data) => {\r\n        this.hide()\r\n\r\n        this.pendingRequest = false\r\n      }).catch(({ response }) => {\r\n        this.errors = response.data\r\n        this.pendingRequest = false\r\n      })\r\n    },\r\n    checkPasswords() {\r\n      if (this.password === null || this.confirmPassword === null) {\r\n        this.samePasswords = true\r\n        return this.samePasswords\r\n      }\r\n\r\n      this.samePasswords = (this.password === this.confirmPassword)\r\n      return this.samePasswords\r\n    },\r\n    show(type) {\r\n      this.type = type\r\n      this.$modal.show('auth')\r\n    },\r\n    hide() {\r\n      this.$modal.hide('auth')\r\n    },\r\n    opened() {\r\n      this._adaptive()\r\n    },\r\n    beforeClose() {\r\n      // Enable scrolling of main page\r\n      document.documentElement.style.overflow = null\r\n    },\r\n    _adaptive() {\r\n      // Steps to have adaptive height for the modal\r\n      setTimeout(() => {\r\n        const modalDiv = document.querySelectorAll('div.v--modal-box')[0]\r\n        modalDiv.style.height = 'auto'\r\n\r\n        // Add scroll functionality and hide background\r\n        const modalOverlay = document.querySelector('div.v--modal-overlay')\r\n        modalOverlay.style.overflow = 'auto'\r\n        modalOverlay.style.background = 'rgba(2,6,14,.8)'\r\n\r\n        // Disable scrolling of main page, only allow for modal\r\n        //  document.documentElement.style.overflow = 'hidden'\r\n      }, 50)\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/euvl/vue-js-modal/issues/comments/335500382","html_url":"https://github.com/euvl/vue-js-modal/issues/99#issuecomment-335500382","issue_url":"https://api.github.com/repos/euvl/vue-js-modal/issues/99","id":335500382,"user":{"login":"euvl","id":1577802,"avatar_url":"https://avatars0.githubusercontent.com/u/1577802?v=4","gravatar_id":"","url":"https://api.github.com/users/euvl","html_url":"https://github.com/euvl","followers_url":"https://api.github.com/users/euvl/followers","following_url":"https://api.github.com/users/euvl/following{/other_user}","gists_url":"https://api.github.com/users/euvl/gists{/gist_id}","starred_url":"https://api.github.com/users/euvl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/euvl/subscriptions","organizations_url":"https://api.github.com/users/euvl/orgs","repos_url":"https://api.github.com/users/euvl/repos","events_url":"https://api.github.com/users/euvl/events{/privacy}","received_events_url":"https://api.github.com/users/euvl/received_events","type":"User","site_admin":false},"created_at":"2017-10-10T14:56:08Z","updated_at":"2017-10-10T14:56:19Z","author_association":"OWNER","body":"Hey @atmar. After `closed` event is fired - modal is destroyed. \r\nFrom docs:\r\n```\r\n$refs is also non-reactive, therefore you should not attempt to use it in \r\ntemplates for data-binding.\r\n```"}}
{"actor":{"display_login":"euvl"}}