I have following kind of code:

<div>
  <pA />
  <pB />
</div>

How do I make sure that first pA is rendered only after it pB is rendered.

Why I want is I have some dependency on few elements of pA, and style of pB depends on presence of those elements.

Why in details:

I have some plex UI design, where one box will bee fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I am using jquery-visible to find if a div with a particular id is visible on the screen, if it is not visible, I change the style and make that box fixed. Following code should give the idea what I am doing:

methods: {
  onScroll () {
    if ($('#divId').visible(false, false, 'vertical')) { // This is div from the pA, so I want to make sure it is rendered first and it is visible
      this.isFixed = false
    } else {
      this.isFixed = true
    }
  }
},
mounted () {
  window.addEventListener('scroll', this.onScroll() }
},
destroyed () {
  window.removeEventListener('scroll', this.onScroll)
}

I dont want to make those in same ponent as one reason is it dont make sense as the nature of these ponents, and other I use pA at many places, while pB is specific to only one page. Also layout of these does not allow me to make pB child of pA as suggested in ments.

Any suggestions are wele.

I have following kind of code:

<div>
  <pA />
  <pB />
</div>

How do I make sure that first pA is rendered only after it pB is rendered.

Why I want is I have some dependency on few elements of pA, and style of pB depends on presence of those elements.

Why in details:

I have some plex UI design, where one box will bee fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I am using jquery-visible to find if a div with a particular id is visible on the screen, if it is not visible, I change the style and make that box fixed. Following code should give the idea what I am doing:

methods: {
  onScroll () {
    if ($('#divId').visible(false, false, 'vertical')) { // This is div from the pA, so I want to make sure it is rendered first and it is visible
      this.isFixed = false
    } else {
      this.isFixed = true
    }
  }
},
mounted () {
  window.addEventListener('scroll', this.onScroll() }
},
destroyed () {
  window.removeEventListener('scroll', this.onScroll)
}

I dont want to make those in same ponent as one reason is it dont make sense as the nature of these ponents, and other I use pA at many places, while pB is specific to only one page. Also layout of these does not allow me to make pB child of pA as suggested in ments.

Any suggestions are wele.

• javascript
• vue.js
• vuejs2
• vue-ponent

• My best shot is to use events. – Jonatas Walker Commented Mar 28, 2017 at 14:07
• 1 Could CompB not be a child of CompA since CompB depends on CompA? – Amresh Venugopal Commented Mar 28, 2017 at 14:11
• @AmreshVenugopal No I will not like to do that due to nature of these ponents. – Saurabh Commented Mar 28, 2017 at 14:18
• @JonatasWalker How to use events here? – Saurabh Commented Mar 28, 2017 at 14:19
• 2 Okay, another question I have is why is CompB depending on elements of CompA why not the data of CompA? Since the difference in the kinds of different elements would also be some kind of v-if='true': make input tag' v-else: make p-tag like implementation? – Amresh Venugopal Commented Mar 28, 2017 at 14:23

2 Answers 2

An option with events:

<!-- Parent -->
<div>
  <p-a @rendered="rendered = true"></p-a>
  <ponent :is="pB"></ponent>
</div>
<script>
  // import ...
  export default {
    ponents: { CompA, CompB },
    watch: {
      rendered: function (val) {
        if (val) this.pB = 'p-b';
      }
    },
    data() {
      return {
        rendered: false,
        pB: null
      }
    }
  }
</script>

<!-- Component B -->
<script>
  export default {
    mounted() {
      this.$emit('rendered');
    }
  }
</script>

After going through the edit I realised that the dependency is not data driven but event driven (onscroll). I have tried something and looks like it works (the setTimeout in the code is for demonstration).

My implementation is slightly different from that of Jonatas.

<div id="app">
  RenderSwitch: {{ renderSwitch }} // for demonstration 
  <template v-if='renderSwitch'>
    <p-a></p-a>  
  </template>
  <p-b @rendered='renderSwitchSet'></p-b>
</div>

1. When the ponent-B is rendered it emits an event, which just sets a data property in the parent of both ponent-A and ponent-B.

2. The surrounding <template> tags are there to reduce additional markup for a v-if.

3. The moment renderSwitch is set to true. ponent-a gets created.