Skip to content
This repository has been archived by the owner on Mar 29, 2023. It is now read-only.

$store is undefined inside OfficeLayer #34

Open
super2ni opened this issue Jan 11, 2019 · 2 comments
Open

$store is undefined inside OfficeLayer #34

super2ni opened this issue Jan 11, 2019 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@super2ni
Copy link

Describe the bug
I tried to create my own Modal component using OfficeLayer. It seems that Vuex $store is not "pushed" to the components inside OfficeLayer slot.

To Reproduce

  1. Use the OfficeLayer component like this for example:
<template>
  <OfficeLayer>
      <div class="Modal-content">
        <div class="Modal-header">
          <template v-if="title">{{title}}</template>
          <button @click="$emit('closeModal')" class="Modal-close">Fermer</button>
        </div>
        <SaveAttachments/>
      </div>
  </OfficeLayer>
</template>
  1. Inside the child component of OfficeLayer ("SaveAttachments" in above case), try to access $store.
  2. $store is undefined

Expected behavior
$store in child component should be accessible.

@s-bauer s-bauer added the bug Something isn't working label Jan 11, 2019
@s-bauer s-bauer self-assigned this Jan 11, 2019
@s-bauer
Copy link
Owner

s-bauer commented Jan 11, 2019

Thanks for reporting this! I'll take a look at this!

@s-bauer
Copy link
Owner

s-bauer commented Jan 11, 2019

The problem here is that Vue does not allow to render stuff outside the root element (e.g. the <div id="app"></div> element). I however have to render the content of the OfficeLayer directly in the body, I currently do a workaround, which basically consists of creating a <div> in the body using document.createElement and then creating a new Vue({}) which mounts to this <div>. So the content of the OfficeLayer is completely cut out of the dependency tree of your application. So it makes sense that the mixed in $store variable is not available.

I'm trying to find a fix for this. It's easy to just support vuex, but I want to find a general solution, which works with all mixins and injected properties.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants