What could be causing my nested child component to fail to display the content?

Question

What could be causing my nested child component to fail to display the content?

My current setup includes:

Vue 2.5.16 Veux Vue router

I have created a simple router view that searches for a child component within a parent component using the URL structure:

/folders/parent-uuid/child-uuid

Below is the code for the parent component:

<template lang="html">
  <div>
    <!-- Articles section -->
    <div class="flex-none w-100 mv3 gray"><p>Bookmarks({{ subFolders.contentDetails.articles.length }})</p></div>
    <div class="flex flex-row flex-wrap justify-start items-start">
      <!-- Loop through articles -->
      <div v-for="article in subFolders.contentDetails.articles" class="pointer article-item relative mb4">
        <a v-on:click.stop.prevent="checkFolder(article.uuid)" :class="[{highlight:selectedItems.includes(article.uuid)}, 'absolute w-100 h-100 left-0 top-0 highlight-area z-3']" href="#">
          <div class="contentImage br3 overflow-hidden">
            <img class="w-100" :src=article.titleImage data-flickity-lazyload="article.titleImage">
          </div>
        </a>
      </div>
    </div>
    <div class="flex-none w-100 mt3 gray folders"><div class="ph5"><p>Subfolders({{ subFolders.subFolders.length }})</p></div></div>
    <div class="flex flex-row flex-wrap justify-start items-start">
      <div class="folder-item folder z-0 pointer">
        <div class="relative db h-100 bg-light-gray folder-new br3 mb4">       
          <div v-on:click="addFolder($event)" class="top aspect-ratio--object">
            <p>Create new folder</p>
          </div>
        </div>
      </div>
</template>

Third paragraph goes here.

Fourth paragraph goes here.

Router code snippet goes here.

App code snippet goes here.

If anyone can assist in why the child component is not displaying within the <router-view />, it would be greatly appreciated.

javascript vue.js vuejs2 vue-component vue-router

Answer 1

Answer №1

When incorporating nested routes, each segment of the route will be displayed within the parent route's component. In this scenario, Folder will be displayed within App and FolderChild will be displayed within Folder. It seems that nested routes always follow this pattern, even if a component is not specified for a specific sub-route. Unfortunately, there isn't a fallback option to mount a component in a suitable ancestor instead of the direct parent.

There are two ways to address this issue. The simpler option is to avoid using child routes unless there is a common structure shared among each of the subroutes. This would result in a setup similar to the example below, where routes are organized using comments.

export default [
  {
    // other routes
  },

  // Folder routes
  {
    path: '/folders/:uuid/:parentuuid',
    component: FolderChild,
    name: 'folderchild'
  },
  {
    path: '/folders/:uuid',
    component: Folder,
    name: 'folders'
  }
];

The alternative method involves still utilizing nested routes but including a placeholder component with a single router view in parent routes where there is no additional content to display.

// DummyView.vue
<template>
  <router-view />
</template>

<script>
// Placeholder for parent routes needing child components
export default {
  name: 'dummy-view'
}
</script>

In this approach, the "default" route is moved to a child route with an empty path, using the dummy view to render the parent route and display both Folder and FolderChild.

export default [
  {
    path: "/folders/:uuid",
    component: DummyView,
    children: [
      {
        path: "",
        component: Folder
      },
      {
        path: ":parentUUID",
        component: FolderChild
      }
    ]
  }
];

While this solution may become complex when dealing with multiple named views in a component, it offers the benefit of gradually constructing the desired view without relying on placeholder components solely for mounting child components.

https://codesandbox.io/s/7z1272rkjx

Answer 2

When incorporating nested routes, each segment of the route will be displayed within the parent route's component. In this scenario, Folder will be displayed within App and FolderChild will be displayed within Folder. It seems that nested routes always follow this pattern, even if a component is not specified for a specific sub-route. Unfortunately, there isn't a fallback option to mount a component in a suitable ancestor instead of the direct parent.

There are two ways to address this issue. The simpler option is to avoid using child routes unless there is a common structure shared among each of the subroutes. This would result in a setup similar to the example below, where routes are organized using comments.

export default [
  {
    // other routes
  },

  // Folder routes
  {
    path: '/folders/:uuid/:parentuuid',
    component: FolderChild,
    name: 'folderchild'
  },
  {
    path: '/folders/:uuid',
    component: Folder,
    name: 'folders'
  }
];

The alternative method involves still utilizing nested routes but including a placeholder component with a single router view in parent routes where there is no additional content to display.

// DummyView.vue
<template>
  <router-view />
</template>

<script>
// Placeholder for parent routes needing child components
export default {
  name: 'dummy-view'
}
</script>

In this approach, the "default" route is moved to a child route with an empty path, using the dummy view to render the parent route and display both Folder and FolderChild.

export default [
  {
    path: "/folders/:uuid",
    component: DummyView,
    children: [
      {
        path: "",
        component: Folder
      },
      {
        path: ":parentUUID",
        component: FolderChild
      }
    ]
  }
];

While this solution may become complex when dealing with multiple named views in a component, it offers the benefit of gradually constructing the desired view without relying on placeholder components solely for mounting child components.

https://codesandbox.io/s/7z1272rkjx

What could be causing my nested child component to fail to display the content?

Answer №1

Similar questions

Setting up a Webpack configuration for packaging a Vue component as an npm module

Why does attempting to access an undefined property not trigger an error?

Challenge with modal dialog scrolling on iPad and iPhone

Encountered an issue when trying to mount a component in my fresh Laravel 5.5 project

Is there a way to transfer a variable from Angular 2 Frontend Express JS to an Angular 2 component?

Exploring ways to run tests on a server REST API using testem

Utilizing CakePHP 3.0 with jQuery UI for an autocomplete feature

Using nodemailer to send an email with a dynamic variable that holds the HTML content

Unable to extract attributes from a different model within Sails.js

Blank Vue Page Generated by Laravel Mix

Is it wrong to use <match v-for='match in matches' v-bind:match='match'></match>? Am I allowed to incorporate the match variable from the v-for loop into the v-bind attribute on the

Angular not detecting changes in string variables

Issue with Context Menu Not Triggering on Dynamically Added Elements in JQuery

The validator function is causing an error with the 'lowerCase()' method resulting in an undefined output

What is the best way to switch out the characters 'a' and 'b' in a given string?

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

Enhance the "content switcher" code

Exploring React hook functionalities can lead to discovering unexpected issues such as cyclic dependencies on location.hash when

What is the best way to create a self-referencing <div> in HTML?

Is there a way to identify if the parent page has completed loading while within an iframe?