Guide on incorporating Vue components: implementing component 2 within the template of component 1

Question

Guide on incorporating Vue components: implementing component 2 within the template of component 1

I'm a Vue beginner and struggling with how to use one component within the template of another or how to combine them in HTML. I've tried looking through the documentation and Stack Overflow but can't seem to figure it out.

Currently, I am using Vue via cdnjs.

For example:

I have a root Vue instance #app. Inside, I've registered two data arrays: one for containers and another for tables within those containers.

Now, in my HTML, I have a container where I want to include a table at a specific place. How do I achieve this? When I try to put the table directly inside the container component, Vue doesn't recognize it as valid and throws an error.

Here is my progress so far:


var app = new Vue({
   el: '#app',
   data: {
      containersList: [{container-object}],
      tablesList: [],
      methods(){}
   },

let container = Vue.component('container',{
   props: ['item'],
   template: '<div class="container">{{ item.data }}</container></div>',

<container v-for="item in containerList></container>

At this point, I have managed to render components, populate them with data, and make everything reactive.

My next challenge is populating containers with tables and potentially nesting tables within tables. Any advice on how to approach this?

My current logic seems to be failing here.


let tableComponent = Vue.component('table-component', {
   props: ['item'],
   template: '<div class="table"></div>'
}
let container = Vue.component('container',{
   props: ['item'],
   template: '<div class="container"><table-component></table-component></div>

UPDATE: Although the rendering appears as expected, I am encountering an error related to the "tablesList" array in the data. It seems that the child component does not have access to it and throws the error "Property or method 'tablesList' is not defined on the instance but referenced during render".

The parent container component has access to it, but the child component does not.

javascript vue.js

Answer 1

Answer №1

After making some adjustments to your code, I have created a simplified example.

Take a look at the revised code snippet below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <container></container>
    </div>
    <script>
      let tableComponent = Vue.component("table-component", {
        props: ["item"],
        template: '<div class="table">table-component</div>'
      });

      let container = Vue.component("container", {
        props: ["item"],
        template: `<div class="container">
            <div>container</div>
            <table-component></table-component>
          </div>`
      });

      let app = new Vue({
        el: "#app",
        data() {
          return {
            containersList: [],
            tablesList: []
          };
        },
        methods: {
          anyMethod() {
            console.log("test");
          }
        }
      });
    </script>
  </body>
</html>

Answer 2

After making some adjustments to your code, I have created a simplified example.

Take a look at the revised code snippet below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <container></container>
    </div>
    <script>
      let tableComponent = Vue.component("table-component", {
        props: ["item"],
        template: '<div class="table">table-component</div>'
      });

      let container = Vue.component("container", {
        props: ["item"],
        template: `<div class="container">
            <div>container</div>
            <table-component></table-component>
          </div>`
      });

      let app = new Vue({
        el: "#app",
        data() {
          return {
            containersList: [],
            tablesList: []
          };
        },
        methods: {
          anyMethod() {
            console.log("test");
          }
        }
      });
    </script>
  </body>
</html>

Guide on incorporating Vue components: implementing component 2 within the template of component 1

Answer №1

Similar questions

Transforming data from an HTML table into a MySQL database

Guide to attaching a page content button to a fixed header

Retrieving form parameters within an EJS template

What is the reason for the lack of user data being saved in studio3t?

Arrow function utilized in string rendered component

Creating a rhombus or parallelogram on a canvas can be easily achieved by following these simple

What is the best way to integrate the AWS SDK (Javascript) with VueJS?

Using node.js to parse an XML file from a URL and iterate through it to retrieve all the URLs contained within

Ways to retrieve data from a URL and pass it to JavaScript code

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Using Javascript to fetch JSON data from a PHP file hosted on an IIS server, incorporating JSONP with

Tips for extracting CSS data with Selenium webdriver's executescript function

Performing an Ajax call in the correct order within an MVC framework

Identify the index of a list item using a custom list created from buttons

Struggling with dynamic values and regex while utilizing HTML template strings. Need help overcoming regex challenge

Retrieve the offspring with the greatest level of depth within a parental relationship

Guide to deploying a Rails app with Vue on the Heroku free plan

Uploading files in React.js using Yii2 API

Add a static line of names to a JavaScript file

Why is it necessary to include 'export' when declaring a React component?