Following problem:

I have a Vue.js ponent which relies on its parent's DOM. But the moment the prop gets passed, it (this.$el) is undefined, probably because it's not yet mounted then.

My ponent's vue template file looks like this:

<template>
  <md-card>
    <md-card-content>
      <ol>
        <li v-for="item in headings(content)">
          <a :href="`#${item.id}`">{{ item.name }}</a>
        </li>
      </ol>
    </md-card-content>
  </md-card>
</template>
<script>
  export default {
    props: ['content'],
    methods: {
      headings(content) {
        // DOM element is used
        // At this moment, `content` is undefined
      },
    },
  };
</script>

The ponent that uses the one above includes this piece of code:

<article-index :content="this.$el"></article-index>

I thought of waiting for the parent ponent to be mounted, but that way I can't seem to keep the template like above, because it would always try to access the method (or variable) instantly.

How can I solve this?

Edit:

<template>
  <div class="content">
    <div class="left"><article-index :content="this.$el"></article-index></div>
    <div class="article"><slot></slot></div>
    <div class="right"><slot name="aside"></slot></div>
  </div>
</template>

Here's the parent ponent's template. The only thing I actually need is the .article div, or the slot's contents.

Following problem:

I have a Vue.js ponent which relies on its parent's DOM. But the moment the prop gets passed, it (this.$el) is undefined, probably because it's not yet mounted then.

My ponent's vue template file looks like this:

<template>
  <md-card>
    <md-card-content>
      <ol>
        <li v-for="item in headings(content)">
          <a :href="`#${item.id}`">{{ item.name }}</a>
        </li>
      </ol>
    </md-card-content>
  </md-card>
</template>
<script>
  export default {
    props: ['content'],
    methods: {
      headings(content) {
        // DOM element is used
        // At this moment, `content` is undefined
      },
    },
  };
</script>

The ponent that uses the one above includes this piece of code:

<article-index :content="this.$el"></article-index>

I thought of waiting for the parent ponent to be mounted, but that way I can't seem to keep the template like above, because it would always try to access the method (or variable) instantly.

How can I solve this?

Edit:

<template>
  <div class="content">
    <div class="left"><article-index :content="this.$el"></article-index></div>
    <div class="article"><slot></slot></div>
    <div class="right"><slot name="aside"></slot></div>
  </div>
</template>

Here's the parent ponent's template. The only thing I actually need is the .article div, or the slot's contents.

• javascript
• vue.js
• vue-loader

• Why are you passing this.$el in prop ? – Saurabh Commented Jan 7, 2017 at 14:45
• @saurabh Because I need to access the DOM element in order to do execute querySelector. How would you do it? – sk22 Commented Jan 7, 2017 at 14:47
• I will try to pass a vue variable there, can you add your HTML of parent DOM as well, and point out what exactly you want to access. – Saurabh Commented Jan 7, 2017 at 14:49
• @saurabh Did so – sk22 Commented Jan 7, 2017 at 14:52
• @saurabh I see you edited the title... Well, I don't know how I access the slot DOM anyway