How to control order of rendering in vue.js for sibling component

Question

I have following kind of code:

<div>
  <compA />
  <compB />
</div>

How do I make sure that first compA is rendered only after it compB is rendered.

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

Why in details:

I have some complex UI design, where one box will become 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 compA, 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 component as one reason is it dont make sense as the nature of these components, and other I use compA at many places, while compB is specific to only one page. Also layout of these does not allow me to make compB child of compA as suggested in comments.

Any suggestions are welcome.

Could `CompB` not be a child of `CompA` since `CompB` depends on `CompA`? — Amresh Venugopal, Mar 28 '17 at 14:11
@AmreshVenugopal No I will not like to do that due to nature of these components. — Saurabh, Mar 28 '17 at 14:18
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, Mar 28 '17 at 14:23
It's sounding like `compA` and `compB` should be combined if they're that dependent on each others timing? — Bill Criswell, Mar 28 '17 at 14:26
@Saurabh Oh, Now I get it why these components are not data dependant. — Amresh Venugopal, Mar 29 '17 at 05:17

score 3 · Answer 1 · answered Mar 28 '17 at 14:35

3

An option with events:

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

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

answered Mar 28 '17 at 14:35

Jonatas Walker

13,583
5
53
82

so `@rendered` is being emitted from comp-a, right? – Saurabh Mar 28 '17 at 14:45
Nope. I guess I inverted the order you need. Just change the order. – Jonatas Walker Mar 28 '17 at 14:55
Yes, this also works, but with `setTimeout`, not without `setTimeout`, as I commented on answer of @AmreshVenugopal – Saurabh Mar 29 '17 at 06:01

Amresh Venugopal · Accepted Answer · 2017-03-29T07:22:46.980

2

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'>
    <comp-a></comp-a>  
  </template>
  <comp-b @rendered='renderSwitchSet'></comp-b>
</div>

When the component-B is rendered it emits an event, which just sets a data property in the parent of both component-A and component-B.
The surrounding <template> tags are there to reduce additional markup for a v-if.
The moment renderSwitch is set to true. component-a gets created.

edited Mar 29 '17 at 07:22

answered Mar 29 '17 at 05:14

Amresh Venugopal

9,299
5
38
52

Thanks, This works, interesting thing is I have to give `setTimeout`, even timeout can be of 0 sec, But without timeout it does not works. any reason why this might be? – Saurabh Mar 29 '17 at 06:00
Maybe there is a lot going on in the component where the `$emit` is happening? if yes, then setTimeouts queue the function giving it time to execute, [read here](http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful). In the fiddle that I have, it was working even without the timeout. – Amresh Venugopal Mar 29 '17 at 06:05

How to control order of rendering in vue.js for sibling component

2 Answers2

Linked