"Exploring the power of Vue.js through dynamic and recursive components

I am struggling with creating a recursive custom component that calls itself. Unfortunately, I keep encountering an error.

An unknown custom element: <TestRec> - have you registered the component correctly? For recursive components, ensure to specify the "name" option.

Even though I have provided a name option as shown below, the issue persists.

Do you have any insights on what might be causing this error?

<template>
  <div>
        <h4>I have developed a component capable of calling itself below</h4>

        <v-select :items="['TestRec', 'normal']" v-model="comp"></v-select>

        <hr />
        <component :is="comp"></component>
  </div>
</template>

<script>
import TestRec from "./TestRec";
export default {
    name: 'New-Test-Rec', //Tried using 'Test-Rec' as well, but faced the same issue
    components: {
        TestRec
    },
    data(){
        return {
            comp: null
        }
    }
}
</script>

Answer №1

It was successful for me after I eliminated the components key and referred to it by its name. You can view a live demonstration in CodeSandbox by clicking on this link. Below is the code for future reference:

<template>
    <div class="hello">
        <h4>I am a component that can call itself below</h4>
        <button @click="show = true">Load next</button>
    <hr />
    <component v-if="show" :is="'TestRec'"></component>
    </div>
</template>

<script>
    export default {
  name: 'TestRec',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      show: false
    }
  }
}

</script>

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

Unable to retrieve the path during an AJAX request in PHP and JavaScript

I'm struggling with passing data to the server-side using an ajax call. It's giving me an error saying 'The required path not found'. I am working with CodeIgniter for the MVC framework. Below is a snippet of the code: var url = "http: ...

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

Building Dynamic Columns within a react.js Environment

Can anyone help me with creating a dynamic column in react.js? I've already managed to do it with static columns, but now I want to make them dynamic. Take a look at my code below and please provide suggestions. import React from 'react'; i ...

Retrieving data sent through an AJAX post request

My current project involves making a POST call from a basic HTML page to a Node.js and Express server that will then save the input values to a MongoDB collection. The issue I am facing is that when passing two POST parameters, namely 'name' and ...

Learn the process of extracting various data from a PHP source and saving it in select options through AJAX

One of the features on my website is a select option that allows users to choose a hotel name obtained from a dynamic php script. Once a hotel is selected, another select option displays room types available based on the chosen hotel. However, there seem ...

Struggling to get Angular to properly sanitize inputs using ng-bind-html

I've been struggling to figure out the issue in my code for an entire day with no success. At this point, I'm reaching out for help. My problem arises when trying to utilize ng-bind-html-unsafe within a template. As a newcomer to Angular, it&apos ...

Issue: requireJS configuration is invalid

Here is the file structure of my project - src |- main.js |- math.js The math.js file acts as an AMD module and is being required in main.js. I have npm installed require.js and included it in main.js. //main.js var rjs = require('requirejs' ...

Make sure to load the gif image before any other images are loaded from the css

Hey there, I'm attempting to display a GIF image before the actual image loads. I found a great example to accomplish this: Example: Java Script function loadimage(imgsrc, change){ var loadimage = new Image(); loadimage.onload = changesrc(imgsrc, c ...

Combining the Powers of Angular JS and Symfony2

Currently working on a project involving Symfony2 and in need of some advice. Considering a hybrid application approach in two ways: a) Using a traditional form with CSRF Token for the Login Page handled by Symfony2, and b) Inner pages (potentially module ...

Showing dynamic content retrieved from MongoDB in a list based on the user's selected option value

Implementing a feature to display MongoDB documents conditionally on a webpage is my current goal. The idea is for the user to choose an option from a select element, which will then filter the displayed documents based on that selection. For instance, if ...

Tips for preventing automatic zoom on mobile devices

Check out this link for the test: The current layout of the site is exactly how I want it to be presented. However, I am facing an issue where if I set the viewport meta tag to <meta name="viewport" content="width=device-width, initial-scale=1"> i ...

The Vue component fails to refresh when the state in the store undergoes changes

Trying to create a simple todo list in Vue, but aiming to abstract everything out and utilize a dummy REST API for practice with production-level Vue projects has left my head spinning. While GET, PUT, and POST requests appear to be functioning properly, I ...

Use Meteor to retrieve the value from the initial collection in order to locate the value in the second collection

Currently, I have two sets of data: Users, containing userId, firstname, and surname. Answers, containing answerId, questionId, and user. In the 'Answers' collection, the 'user' field corresponds to the userId of the user who provide ...

React Native buttons are displaying at a fixed width and not adjusting as expected

Within a row, I have two buttons with a padding of 20 between them, and they are only taking up the necessary width for the button text. The width remains constant! Here is the code for the buttons: <View style={styles.buttonContainer}> &l ...

Innovative and interactive animated data display

I've taken inspiration from an example and expanded the code to achieve the following: Dynamic height adjustment Accessibility without JavaScript enabled Is this implementation correct? Can it be expected to function properly on most browsers? You ...

Retrieve the most recently added item in the Material-ui Autocomplete component

Currently, I am incorporating the material-ui Autocomplete component with multiple selection feature. In one specific scenario, I require the ability to retrieve only the value of a newly added item. Despite utilizing the onChange listener, the event pro ...

Limit the bootstrap datepicker to display only certain dates and today's date

I've integrated the Bootstrap Datepicker into my website. I need to customize it so that only specific dates are enabled, including today's date, and all other years, months, and days are hidden from the Datepicker. How can I achieve this? Furth ...

Unable to configure node and express for file serving

Currently using Windows 7, I have successfully installed nodes 0.10.12 and the latest versions of express and express-generator globally. I then proceeded to create a new express project called nodetest1 and installed all dependencies using npm install. U ...

Google Maps in Angular is not showing up

My Angular Google Maps implementation seems to be working, but unfortunately, the map is not showing on my website. I have confirmed that my JS is loading the maps and I can retrieve the map properties. Interestingly, when I check the Chrome AngularJS Debu ...

Updating component data in VueJS can sometimes be tricky, especially when dealing with the same

I have a route called '/posts' which includes a created() function that fetches data from an API using GET and displays the data on the page. Recently, I added a navbar to all pages with an input field for searching posts by tags. This tag-based ...