Managing the order of rendering for sibling components in vue.jsUniquely controlling rendering order in

I have the following code snippet:

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

How can I ensure that compA is rendered only after compB is rendered?

The reason for this is that I have dependencies on certain elements in compA, and the styling of compB depends on the presence of these elements.

Explanation in detail:

I have a complex UI design where a box becomes fixed when you scroll. It should remain on the screen once it touches the header. To achieve this, I am using jquery-visible to determine if a div with a specific id is visible on the screen. If it's not visible, I change the style to make the box fixed. The following code illustrates my approach:

methods: {
  onScroll () {
    if ($('#divId').visible(false, false, 'vertical')) { // This is a div from compA, so it needs to be rendered first and be visible
      this.isFixed = false
    } else {
      this.isFixed = true
    }
  }
},
mounted () {
  window.addEventListener('scroll', this.onScroll() }
},
destroyed () {
  window.removeEventListener('scroll', this.onScroll)
}

I prefer not to combine these components into one as it doesn't align with their nature, and also because I use compA in multiple places while compB is specific to one page. Additionally, the layout doesn't allow me to make compB a child of compA as suggested in comments.

Any suggestions would be appreciated.

Answer №1

A customizable choice involving events:

<!-- Main -->
<div>
  <comp-x @loaded="loaded = true"></comp-x>
  <component :is="compY"></component>
</div>
<script>
  // import ...
  export default {
    components: { CompX, CompY },
    watch: {
      loaded: function (val) {
        if (val) this.compY = 'comp-y';
      }
    },
    data() {
      return {
        loaded: false,
        compY: null
      }
    }
  }
</script>

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

Answer №2

Upon reviewing the edits, it became evident to me that the dependency is not data-driven, but rather event-driven (onscroll). I experimented with something and it seems to be functioning correctly (the setTimeout in the code is simply for demonstration purposes).

My approach differs slightly 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>
  1. Upon rendering component-B, it emits an event that simply sets a data property in the parent of both component-A and component-B.

  2. The <template> tags surrounding it are meant to minimize additional markup for a v-if statement.

  3. As soon as renderSwitch is set to true, component-a is instantiated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Outputting an object using console.log in Node.js

When I print the error object in nodejs, the result of console.log(err) appears as follows: { [error: column "pkvalue" does not exist] name: 'error', length: 96, severity: 'ERROR'} I'm curious about the information enclosed ...

Combining numbers of identical precedence levels in JavaScript/jQuery

Suppose I have an array stored as follows: [1,2,3,4,5,6,7,9] My desired output is a string containing: "{1 to 7;9}" Currently, my code looks like this: var _checkbox = [1,2,3,4,5,6,7,9]; for (i=0; i<_checkbox.length; i++) { //if ($($(_checkbox) ...

What are the best practices for implementing serialization in NestJS?

Recently, I delved into a fresh NestJs project and encountered a hurdle while trying to integrate serialization. The goal was to transform objects before sending them in a network response. Initially, everything seemed to be working smoothly until I attemp ...

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Hello there! I initially used this code to draw 12 lines, but now I am looking to incorporate a for loop and implement it in CSS. Can someone please guide me on how to proceed? <!DOCTYPE html> <html> <head> <style> #straigh ...

Invoke a jQuery function in the parent page using regular JavaScript from an iframe

I have successfully created an iframe using regular javascript. Inside the iframe is a Jquery function along with JQuery itself and it functions correctly within the iframe. However, I am now looking to execute this function from the parent page instead of ...

Tips for incorporating an onClick event into a variable beyond the class extension

Currently utilizing React/Redux in this scenario. At the beginning of my code, outside of the class extends block, I have: const Question10 = () => (<div> <p>Insert question here</p> <input place ...

Sending a POST request to a Flask server using Stripe and AJAX

I am attempting to implement a function that triggers an ajax request when a stripe form is submitted. However, using the .submit() method doesn't seem to be working as expected. Here is my current code: HTML <form action="/download_data" method= ...

Animate the div only when the button is clicked

I need a way to hide the text inside a div when it exceeds a certain height, but then expand it to full height upon clicking a button. However, I want this action to only affect the parent div of that specific button, rather than all the divs on the page. ...

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

I recently implemented datadables.net pagination for my HTML table. I am looking to customize the pagination buttons by hiding or removing the 1, 2, 3 ... buttons and only display Next and Previous Buttons. Is there a way to achieve this by setting paging ...

Encountering an issue while attempting to assess a Meteor package within a local environment

Hello everyone! I'm a beginner in Meteor programming and currently following the online book discovermeteor.com. I recently came across a chapter that covers the creation of Meteor Packages. Excitedly, I proceeded to create my own package using the ...

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

Switching an :active class using ReactJS

Currently, I am working on creating an onboarding screen where the user is required to select three or more items. Once the user clicks on an item, a purple overlay should remain visible. For reference, this is what I have in mind: https://i.sstatic.net/ ...

Refining Calculated Attributes

I am currently creating a list where you can add and remove elements while specifying the count of each added element. I have included all elements in my data: Example: [ { "rowID": "21", "rowAnzahl": 1, "elementID": "127", "elementNam ...

Operating PhantomJS in server mode

I am considering using PhantomJS to convert a dynamic AngularJS application into static HTML that can be searched by Google. My plan is to set up a PhantomJS server behind a proxy to handle the ?escaped_fragment requests. While I know that PhantomJS is pri ...

Leveraging the power of the 'var' keyword in JavaScript when

I have a javascript code snippet that looks like this: var grade_type = document.getElementById("grade_type").value; gradesRef.set({ grade_type: firebase.firestore.FieldValue.arrayUnion(grade) }); However, when the data is stored i ...

Run a JavaScript function in the webpage that is being loaded using an XMLHttpRequest

What is the best way to trigger a JavaScript function within a specific page using XMLHttpRequest? For example, if I have the following code: xmlhttp.open("GET", "page1.php?q=" + mydata, true); How can I execute a JavaScript function that will, for insta ...

Is there a way for me to determine the dimensions of the webcam display?

How do I determine the width and height of the camera in order to utilize it on a canvas while preserving proportions? I am attempting to ascertain the dimensions of the camera so that I can use them on a canvas. On this canvas, I plan to display live vid ...

Tips for preventing the need to re-render every child component generated by the v-for directive

Here is a paragraph about the list of child components: <question-list-item v-for="(item, index) in questionListParsed" :key="item.id" :both-question="item" :class-id="classId" ...

I'm encountering an issue with enabling Node.js support on PhpStorm as it keeps freezing at the dialog box. Does anyone have a solution for this problem?

Seeking assistance with configuring code support for Vue files in PhpStorm v10.0. Despite having Node and Vue plugins installed, my laptop also has Node(v10.16.3) downloaded. Encountering an issue where PhpStorm freezes at a dialog box, as shown in the sc ...

The tools needed for securing a web application with ExpressJS include the use of

I recently implemented an upload function using connect-form with formidable and https://github.com/ctavan/express-validator. While attempting to sanitize an image from XSS, I encountered a 'TypeError: Cannot call method 'replace' of undefin ...