Placeholder within Component not showing in JSS

Question

I am new to Sitecore JSS development. I am really struggling with how placeholders are working in JSS. I am using VUE.JS for my development. I have three root level placeholders in the layout.vue. I can see the root level placeholders are working but the placeholder inside my component is not showing the data:

Below is my VUE code for footer component:

<div class="row">
   <div class="component link-list col-8 col-sm-9 col-lg-10 footer-links--major">
     <div class="component-content">
       <placeholder name="jss-footer/jss-top-links" :rendering="rendering" /> //this is not showing 
     </div>
</div>

The LinkList component code (Not displayed):

<template>
  <ul>
    <li class="item0 odd first">
      <div class="field-link">
        <!-- <div> <pre>{{JSON.stringify(rendering) }}</pre> </div> -->
        <a href="/about-us" target=""><span>About us</span></a>
      </div>
    </li>
    <li class="item1 even">
      <div class="field-link">
        <a href="/about-us/careers" target=""><span>Careers</span></a>
      </div>
    </li>
    <li class="item2 odd">
      <div class="field-link">
        <a href="/about-us/news-and-media" target=""><span>News and media</span></a>
      </div>
    </li>
    <li class="item3 even">
      <div class="field-link">
        <a href="/help-contact" target=""><span>Help &amp; Contact</span></a>
      </div>
    </li>
    <li class="item4 odd last">
      <div class="field-link">
        <a href="https://www.abc.com.au/login" target=""><span>My RACQ Account</span></a>
      </div>
    </li>
    <pre> {{JSON.stringify(fields)}} </pre>
  </ul>
  
</template>

<script>
//import { Link } from '@sitecore-jss/sitecore-jss-vue';
export default {
  name: 'LinkList',
  components: {
  },
  props: {
    rendering: {
      type: Object,
      default: () => ({}),
    },
    fields: {
      type: Array,
      default: () => ([]),
    },
  },
};
</script>

My layout.vue

<template>
  <div>
    <visitor-identification />
    <placeholder name="jss-header" :rendering="route" />
    <div class="container">
      <placeholder name="jss-main" :rendering="route" />
      <placeholder name="jss-footer" :rendering="route" />
    </div>
  </div>
</template>

<script>
import { Placeholder } from '@sitecore-jss/sitecore-jss-vue';
import VisitorIdentification from './VisitorIdentification';

import 'bootstrap/dist/css/bootstrap.css';
import './assets/app.css';

export default {
  name: 'Layout',
  props: {
    route: {
      type: Object,
      default: () => ({}),
    },
    rendering: {
      type: Object,
      default: () => ({}),
    }
  },
  metaInfo() {
    return {
      title:
        (this.route.fields && this.route.fields.pageTitle && this.route.fields.pageTitle.value) ||
        'Page',
    };
  },
  components: {
    Placeholder,
    VisitorIdentification,
  },
};
</script>

I am using page designs and partial designs to add footer to the SXA. The footer is added but top links are not below is my sitecore setup:

Presentation details for partial design

Links not shown:

Answer 1

The name is jss-footer/jss-top-links which means you're using dynamic placeholders. This is what the docs say about them:

https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/sitecore-dynamic-placeholders-and-jss.html

Dynamic placeholders were introduced with Sitecore 9.0. JSS takes advantage of this feature to drive layout and content dynamically in JSS applications.

A central part of Sitecore architecture is a data-driven page layout based on addressing the location of components using placeholder keys.

Components define their available placeholders in their code/markup and are placed according to their defined placeholder on the page. Placeholder addresses are usually fully qualified paths, meaning they contain the entire hierarchy of placeholders, delimited with a forward slash ('/'), much like a URL path

The shortcomings of this system become apparent when you attempt to place the same component more than once at the same placeholder address.

In the following example layout, it is unclear which Tabs component the Tab should be placed in when given the placeholder path /phContent/phTab. Out of the box, Sitecore puts a Tab component in the first Tabs container.

To solve this problem, placeholder keys must be dynamic. Some possible approaches are:

Attach an index to the placeholder key based on the position of the component. For example, /phContent/phTab_1.

Utilize the unique identifier (UID) given by Sitecore to a component when it is placed on a page. For example, /phContent/phTab_8DFE46A3-5D17-43E1-835D-129D18BD59AC.

Some combination of the previous approaches.

The UID approach is the most resilient for scenarios such as moving components in advanced Sitecore Editors such as Experience Editor and Horizon.

So you should try one of the above approaches to fix the problem.

Also try this:

<placeholder name="jss-top-links" :rendering="rendering" /> 

If your placeholder is inside another placeholder you only need the last segment.