Dynamic computed subcomponents in Vue.js are a powerful way to create flexible

Currently, I am facing a scenario where I need to create computed local subcomponents. Specifically, I am working on custom data grid row cell components. Here is an example of what I am trying to achieve:

var DataGridRow = {
    props: ['columns'],
    template: '<tr><component v-for="col in columns" :is="col.component"></component></tr>',
    components: function () {
        var comps = {};
        // Custom logic to dynamically build subcomponents here
        return comps;
    }
}

I have encountered issues when attempting this in my tests.

Could it be that this functionality exists but is undocumented, or am I approaching it incorrectly?

If not, would it be feasible to implement such a feature?

Alternatively, is there a better solution that does not involve declaring global components?

EDIT: Further discussion can be found here: https://github.com/vuejs/vue/issues/4651

Answer №1

It seems that when the value of the :is property is the actual component definition and not just its name, there is no need to declare it in subcomponents!

Problem resolved!

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

What is the reason behind AngularJS consistently selecting the first TD cell?

I'm a beginner in AngularJS and I'm testing my skills by creating a small game. Here's the table structure I have: <table class="board"> <h1>Table</h1> <input type="number" ng-model="val"><button ng-click="ctrl.f ...

Empower the user with the ability to interact through touch on dynamically

I am trying to make a div touchable and draggable. I have dynamically created 1 to 10 divs within another div. Currently, these divs can only be dragged using the mouse or cursor. However, I want to enable dragging through touch as well. Can anyone provi ...

Concurrent Accordion and Color Transformation Animations

I am currently utilizing jQuery version 2.0.3 and jQuery UI version 1.10.3, specifically using the accordion feature. I am attempting to modify the color of the accordion panels as they open and close by implementing the following code: $(".main-content") ...

Getting data from an API with authorization in Next.js using axios - a step-by-step guide

click here to view the image user = Cookies.get("user") I'm having trouble accessing this pathway. I stored user data, including the token, using cookies. Please assist me with this issue. ...

How come this constant can be accessed before it has even been declared?

I find it fascinating that I can use this constant even before declaring it. The code below is functioning perfectly: import { relations } from 'drizzle-orm' import { index, integer, pgTable, serial, uniqueIndex, varchar } from 'drizzle-orm ...

Issue with VueJs and ChartJs not displaying custom options when making an API call

Having trouble populating my chart with data from the API. Despite setting extraOptions for my chart, it defaults to default options when rendered. Here is the component code: import { Bar, mixins } from 'vue-chartjs'; export default { name: ...

The function is not triggered when the select tag is changed

I'm currently working on implementing a drop-down menu using the <select> element in HTML. Here is the code snippet I have so far: <select id="Parameter1" onchange="function1()"> <option value = "0105" name = "Frequency">Frequency ...

"The function you are attempting to call is not defined within the HTMLButtonElement.onclick

How do I trigger the DeleteRow and EditRow functions when clicking on the Delete Button and Edit Button? <button style="margin-right: 5px;" type='button' onclick='return EditRow(@i)' id='@editrow' class='btn btn-prima ...

What could be causing the callback function to not function correctly within the HOC component?

I am encountering an issue while passing the state (setActive) to the ButtonsOur component and then trying to pass it to the HOC through a callback. The error message "Uncaught TypeError: setActive is not a function" keeps popping up. Could you please help ...

What is the proper way to retrieve multiple property values stored in a property name using getJSON

I'm having trouble getting multiple languages to work in my code. Could someone assist me and provide guidance on how to write multiple choices for the property name language? When I input code like this to display only Dota 2 games in English, every ...

The perplexing simplicity of closure

Currently, I am endeavoring to enhance my knowledge of JavaScript closures. Let's consider the following two scenarios in Node.js: function A(){ console.log(data); //this will result in a null pointer } module.exports = function(data){ re ...

Javascript - The art of accessing an anonymous array

I'm trying to extract data from an API, but I've run into a snag. There's a list without a name attached to it, making it impossible for me to access the values inside. Here's a simplified example of what I mean: (Here is the JSON stru ...

Can a Typescript class type be defined without explicitly creating a JavaScript class?

I am exploring the idea of creating a specific class type for classes that possess certain properties. For example: class Cat { name = 'cat'; } class Dog { name = 'dog'; } type Animal = ???; function foo(AnimalClass: Animal) { ...

What steps should I take to ensure that my Ngrok domain is functioning properly?

Screenshot of Endpoints I've been facing challenges while attempting to get my NGROK domain operational. Despite completing all the necessary setup steps and successfully running multiple tunnels simultaneously with NSSM, as well as having a business ...

Tips for validating Angular form group input depending on the value of another input within the form?

I am facing an issue with form validation in my Angular version 8 application. I need to validate a form based on the following rules: If a file is uploaded (even if just clicking the button without selecting a file), then the Reason input is not required ...

Tips for implementing advertisements through a content management system or JavaScript

After reviewing a discussion on how to dynamically change code on clients' websites for serving ads, I am in search of an easy-to-implement solution. The code is frequently updated as we experiment with different ad networks like Adsense. Ideally, I w ...

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

Issue with generating WebGL shaders

As I embark on creating a basic application in WebGl and JavaScript following online tutorials, I encountered a peculiar issue while working on some fundamental shaders. The function responsible for generating the shader program presents itself as follows: ...

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

Here is an array of objects I've named mycart[]: [{"id":"6","quantity":"20","price":1500,"title":"casual blue strip"}, {"id":"10","quantity":"2","price":1500,"title":"casual blue round neck"},{"id":"5","quantity":20,"price":150,"title":"casual ...

How to identify the character encoding in a node.js request

Did you know that Facebook chat has a feature where it automatically detects and displays messages in a left-to-right format when typing in English, but switches to right-to-left style when adding right-to-left characters? I'm curious about how Faceb ...