The issue of undefined Vue props arises when dynamically printing a component

Having an issue with dynamically creating the TAG "galeriaimages" in Vue. Although Vue is functioning properly, the props always seem to be undefined.

Thank you for any help.

Main.js

import Vue from 'vue'
import Gi from './components/galeriaimages.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', function() {
    new Vue({vuetify, render: h => h(Gi) }).$mount('galeriaimages');
});

HTML

<galeriaimages p1="awesome" /> <!-- Dynamically created -->

Vue Component

<script>

export default {
    props: ['p1'] ,
    data: function() {
        return {
        }
    },
    created: function() {
        alert(this.p1); //this is always undefined
    }
}

A special thanks to @skirtle for providing the solution :-)

I resolved the issue by adding this line in my vue.config.js

runtimeCompiler: true

...and everything is now working perfectly

Answer №1

The part where you include h(Gi) is generating a component called galeriaimages without passing any properties to it.

If you want to pass a property, you should do the following:

new Vue({
  vuetify,
  render: h => h(Gi, {props: {prop1: 'amazing'}})
}).$mount('galeriaimages');

However, I have a feeling that's not exactly what you're aiming for.

Currently, it looks like you're directly mounting to the <galeriaimages> element, which is unusual, but if you remove the render function, it should still function properly. You might also utilize el instead of $mount:

new Vue({
  vuetify,
  components: {galeriaimages: Gi},
  el: 'galeriaimages'
});

I'd like to mention that most examples recommend using a render function for the root Vue instance because it eliminates the need to include the template compiler in the Vue build. However, this method only works when you have all your other Vue components as pre-built.vue files. If you include templates at runtime, even in your HTML, then you'll have to include the template compiler regardless. In such cases, there's no advantage to employing a render function on the root instance.

Answer №2

In order to properly display the content within the <galeriaimages> tag, you must supply the correct component. Your custom rendering function seems to be interfering with the template parsing, causing it to ignore the <galeriaimages> as a valid component tag.

new Vue({ vuetify, components: { galeriaimages: Gi } }).$mount('galeriaimages');

Additionally, your components are failing to generate any elements, resulting in them being unable to mount successfully.

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

Angular 2: Navigating Through Filters

Currently, I am following an older Angular tutorial on Pluralsight that instructs me to input the code below: performFilter(filterBy: string): IProduct[] { filterBy = filterBy.toLocaleLowerCase; return this.products.filter((product: IProduct) ...

Discover how to achieve the detail page view in Vue Js by clicking on an input field

I'm a beginner with Vuejs and I'm trying to display the detail page view when I click on an input field. <div class="form-group row"> <label for="name" class="col-sm-2 col-form-label">Name</label> ...

eval concealing program in JGraph compared to obfuscation and packing

Many times when the topic of eval is brought up, the response is always the same - avoid using eval. However, I believe there is a valid reason for eval to exist. Nevertheless, there are numerous pitfalls to consider. Regarding jgraph - why do they incorp ...

Organize an array based on two criteria using Angular

How do I sort first by payment and then by amount in Angular? While in C#, I can easily achieve this with array.orderBy(x => x.payment).thenby(x => x.amount) Is there a similar method or function in Angular for sorting arrays? I have explored the A ...

Modifying CSS properties in a component using Javascript: A step-by-step guide

Utilizing the vue-form-wizard component initially displays as follows: https://i.sstatic.net/jwWlP.png After customizing the styles to fit my requirements, I encountered two issues. First: The wizard is supposed to commence before the bullets and the pr ...

The most effective method for adding data to a <pre /> element is through VueJS

I have an electron app that executes a program and stores the output when data is received. My goal is to showcase the content of this output within an html pre element. One approach I can take is to create a variable and continuously add the output data ...

Retrieving the ID parameter from the URL using VUEJS

Currently, I am diving into the world of VUEJS and it's all new to me. I could really use some help figuring out how to extract the ID from a URL, like in this example: URL: example.net/dashboard/a/123456789 I need to be able to retrieve just the ...

Invoke a server-side function with JavaScript or jQuery

Is it possible to call a server-side method using JavaScript or jQuery during a postback? I have a created an anchor button and I want it to function like a link button, triggering a postback and calling an event. I'm thinking that JavaScript might b ...

Observing the intricate structure and details of a complicated object hierarchy within Angular

I'm currently grappling with the challenge of identifying modifications to a complex nested, hierarchical object in an angular environment. Despite my initial hopes of utilizing a $watch or $watchCollection expression, I'm facing difficulties in ...

What methods can be used to replicate a network delay while conducting unit tests for an AngularJS controller?

I am currently utilizing the $httpBackend service within the ngMock module to emulate a GET request. The following is a sample controller code snippet sourced from the AngularJS documentation: // Example controller code function MyController($scope, $http ...

Tips for sending HTML information to a .aspx document and storing it

I am looking to create some dynamic controls in ASP.NET, so I have created an HTML file and used JavaScript to repeat these controls. Now my challenge is how to post the data entered into these controls to an .aspx file and save that data into a database ...

The CSS style class is applied to two menus that share the same route but have different query parameters. These menus are styled with the class name

Utilizing both Vue and Vuetify version 3. For my navigation, I have implemented the v-navigation-drawer component alongside v-list for each menu item: <template> <v-navigation-drawer> <v-list nav> <v-list-item title=" ...

Making JavaScript Code More Efficient with VueJS and VUEX

Keeping my Javascript code clean and concise is a top priority for me. I always strive to condense my code so that it remains clutter-free without sacrificing functionality. Take a look at my vuex-mutation code below: editEvent(state) { if (state.for ...

What is the best way to create a "read-more" button for multiple text sections?

I have a collection of unique artwork displayed on my website, each accompanied by a brief description. <div> <h2>Emotions in Motion</h2> <p> This piece is a captivating blend of vibrant colors and intricate details ...

Utilizing jQuery for seamless communication between parent and child iFrame windows

On my webpage, there is an iFrame containing a table where I want to add a click event to the rows. The challenge is retrieving the selected row within the iFrame from the parent window. The goal is to define a class for a clicked table row like this: $( ...

How can I resolve the "404 not found" error specifically on Internet Explorer (as opposed to Chrome) while using node.js express?

Recently, I have been working on creating a web server using node.js and the express module. After installing node.js, express, and express-generator, I was able to complete a prototype web server for my project just yesterday. However, upon testing my p ...

Creating a unique WooCommerce product category dropdown shortcode for your website

I am having trouble implementing a WooCommerce categories dropdown shortcode. Although I can see the drop-down menu, selecting a category does not seem to trigger any action. Shortcode: [product_categories_dropdown orderby="title" count="0" hierarchical=" ...

Is it possible to retrieve server data in a JavaScript file?

EDIT: I accidentally omitted a piece of relevant code I am looking to access the "jsonData" value from my server in my JavaScript file. Can someone guide me on how to retrieve these values? Here is the server-side code: var express = require('expre ...

Conflicts in routing between Node.js and AngularJS

Currently, my setup involves NodeJS, gulp, and Angular with ui-router. However, I have encountered an issue when configuring Angular to remove the tag (#) from the routes. The problem arises as Angular's routes do not seem to work properly, and the na ...

Code for jQuery is found in a separate file

Previously, all of my jQuery code was written in the main file. Now, I am attempting to move it to another js-file. However, I am encountering an issue where it is not working correctly. FireBug displays the following error: $ is not defined $(document).r ...