Using Vue.js to pass a variable from a parent component to a child component

Parent component: ShowComment

Child component: EditComment

I'm attempting to pass the value stored in this.CommentRecID to the child component.

In the template of ShowComment, I have included:

<EditComment CommentRecID="this.CommentRecID" v-if="showEdit"></EditComment>

and 

this.showEdit = true;

However, the value of this.CommentRecID appears as undefined in the child component:

https://i.stack.imgur.com/PDAib.png

I assumed that including props: ["CommentRecID"], in the child component would be sufficient to pass the data, but it seems not (possibly due to jQuery).

What could be causing the issue with how I am trying to transfer the values?

Here is the parent component code.

And here is the child component code.

javascriptjqueryvue.jsvue-props

Answer №1

In VueJS directives, avoid using this. Instead of a static attribute, utilize v-bind:

<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>

Remember that props in VueJS templates should be kebab-cased, while in component JS logic they should be camelCased. Update your child component's prop declaration accordingly:

props: ["commentRecId"]

Answer №2

To implement this feature, VueJS binding is required

<EditComment :comment-rec-id="CommentRecID" v-if="showEdit"></EditComment>

props: ['commentRecId']

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

Encountering an error message while trying to use `npm i`

I am attempting to set up the environment in order to run tests on JavaScript. I am using Windows 10 and Python 2.7. However, when I input the command 'npm -i', I receive an error message: https://i.stack.imgur.com/j2WXE.jpg To try and resolve ...

javascriptnpm

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

javascriptjqueryhtmllaraveljquery-select2

Posting Form Data with Ajax in CodeIgniter

Incorporating the CodeIgniter framework along with the jQuery Form plugin available at http://malsup.com/jquery/form/ Encountering challenges in ensuring proper functionality of a form. View <div class="row"> <div class="well c ...

javascriptphpjqueryajaxcodeigniter

What is the best way to distribute components between two NextJS projects?

Confused about the best way to share ReactJs components between two NextJs applications - one for e-commerce and the other for a manager portal. In the e-commerce app, there are various UI components that I want to reuse in the manager portal. Considering ...

javascriptreactjsnpmnext.jscomponents

Retrieving the total count of data entries from the JSON server endpoint

Working on a practice application with the JSON server serving as the backend, I have a question. Is there a way to determine the total number of records at an endpoint without actually loading all the records? For example, if my db.json file contains da ...

javascriptjson

What are the differences between a Chrome app and extension? Is there any other way to access the tabs currently open in your

I need to develop an app that can access the tabs a user has open, but I'm struggling to find a way to do so without having my app run in Chrome itself. Creating an extension restricts the UI significantly, which is problematic since my app requires a ...

javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools

Dynamic HTML Table with Ajax Click Event Trigger

I have implemented an HTML table that refreshes automatically every 5 seconds and contains some buttons. The issue I am facing is that the event only triggers before the initial refresh. <?php require_once ('UserTableHtm ...

javascriptphphtmlajax

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

Solving the problem of endless looping in JavaScript tree structures

i have been trying to create a tree structure in JavaScript. However, when I use the add_child function to add a child to an item in the elements array, it adds the child to all items in the elements array and their children, creating an infinite loop. I ...

javascripthtmlcss

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

javascriptjqueryhtmlajax

`html2canvas encountered an issue: Unable to locate a logger instance`

When I use html2canvas to render the same content repeatedly, I encounter an error about 5% of the time. It seems to be sporadic and I'm not sure why it occurs. What could be causing this unpredictable behavior? html2canvas.js:2396 Uncaught (in promi ...

javascripthtmlhtml2canvas

What is the best way to fill in predetermined HTML with information using jQuery?

Currently, I am working with several ajax forms that allow me to add rows of data dynamically using ajax. While the form submission is functioning correctly, I am having trouble figuring out the best way to append the newly inserted data into the database. ...

jqueryhtmlajaxtemplates

Using Entity Framework to create a one-to-many relationship in ASP.NET MVC 5 with code-first approach, and implementing jQuery autocomplete

I am looking to develop a straightforward website where users can post offers with specific details such as title, description, city, and time. Below is a snippet of my database diagram: https://i.stack.imgur.com/f5kcI.png Users can create multiple off ...

c#jqueryasp.netasp.net-mvcentity-framework

Highlight the menu item when you reach a specific section

I am facing difficulties in creating a scrolling menu that highlights the respective item when a specific section is reached. As a beginner in design, I am struggling to achieve this effect. Any insights or guidance on how to implement this would be grea ...

jqueryhtmlcss

Is it possible to interpret all events from multiple perspectives?

Is it possible to listen for events in three different ways? This example shows how we can listen for the load event: 1. <body onload="doSomething();"> 2. document.body.onload = doSomething; 3. document.body.addEventListener('load', doS ...

javascripthtmldom-events

Hiding labels in an HTML document can be achieved by using CSS

Recently, I've been working on a code that relies on a specific Javascript from Dynamic Drive. This particular script is a form dependency manager which functions by showing or hiding elements based on user selections from the forms displayed. Oddly ...

javascripthtml

Update the jQuery script tag with new content - rewrite everything

I am facing an issue with jquery. I need to change the link to src only when "document.write" is present. Below is my code: myscript.js document.write("TEST ABCD"); test.html <html> <body> <button id="example">click me</button&g ...

javascriptjqueryhtml

Exploring the Possibilities of Socket.io Integration with Express 4 Across Multiple Pages: Dive Into Socket.io Sample Code

Just to clarify, I came across a similar question on Stack Overflow before posting this. However, the answer there was not clear to me and my query is slightly different. Thus, I am hoping for a more straightforward explanation. The Express Generator sets ...

javascriptnode.jsexpresssocket.io

What is the best way to dynamically adjust the select option?

I need help with handling JSON objects: [ { id: "IYQss7JM8LS4lXHV6twn", address: "US", orderStatus: "On the way", }, ]; My goal is to create a select option for the order status. If the current status is "On ...

javascriptreactjsmaterial-ui

Clicking an AngularJS button within a form is causing an unexpected page refresh

I am facing an issue with adding a new input field on click. I have two buttons, one to add and another to remove the input box. When I click on the add button, it should add a set of input boxes, but currently, it only adds one and refreshes the page, dis ...

javascriptangularjsangularjs-ng-formangular-forms