Vue comment failed to attach

I am facing an issue with my Vue code where the replies to comments are not showing in the browser until I manually refresh the page or add a new comment followed by a refresh. Even though the reply is successfully saved to the database, it does not display without a manual refresh.

In Comments.vue

My Methods

appendReply(comment,reply){
    _.find(this.comments, { id: comment.id }).children.push(reply)
},

Mounted 

bus.$on('comment:replied', ({ comment, reply }) => {
    this.appendReply(comment, reply)
    this.scrollToComment(reply)
})

Error message displayed in console

[Vue warn]: Error in event handler for "comment:replied": "TypeError: Cannot read property 'push' of undefined"

javascriptlaravelvue.js

Answer №1

As I have a good understanding of the source of this code and the logic behind it, I am able to provide you with the solution to your current problem.

During his explanation of the appendReply method, Alex included the whenLoaded function in the CommentResource related to replies (children).

To fix this issue, you should navigate to the Commentresource class provided by the backend and ensure that the replies (children) property is set to the following code:

'replies' => CommentResource::collection($this->replies)

Alternatively, in your specific case, you can use:

'children' => CommentResource::collection($this->children)

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

Utilizing AJAX in an External JavaScript File

Having an issue with my ajax call. It works perfectly when housed in the same file as the form it interacts with. $(document).ready(function () { $("#uploadbutton").click(function () { var referenceNumber = document.getElementById('refere ...

javascriptphpjqueryajax

Minimize all expanded containers in React

Although I've come across similar questions, none of them have addressed mine directly. I managed to create a collapsible div component that expands itself upon click. However, I am looking for a way to make it so that when one div is expanded, all o ...

javascripthtmlcssreactjs

Troubleshooting Millisecond Problems in JavaScript

According to the explanation on w3schools, Date.parse() is supposed to provide "the number of milliseconds between the date string and midnight of January 1, 1970." This means that if I enter Date.parse("January 1, 1970 00:00:00"), the result should be ...

javascriptparsingdatetime

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium

Retrieve data from the database and dynamically populate a dropdown list based on the selection made in another dropdown menu

I created a JSP page where the values of the second dropdown should change based on the selection in the first dropdown. Both dropdown values are retrieved from the database. The values for the second dropdown are fetched using the foreign key from the t ...

javascripthtmlajaxservlets

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

As I gaze upon a massive dom tree, my task using NodeJS/Selenium is to locate an element by the title attribute within an anchor tag and then click on the associated href. Despite being a newcomer to regex, I am encountering numerous errors already. Below ...

javascripthtmlseleniumdomxpath

Update the input value following a successful action

How can I update the value of an input field after a successful ajax call? I have tried the following approach but it doesn't seem to be working. The result from the alert is 80000 Here is the HTML input code: <input class="form-control" type=" ...

javascriptjqueryajax

What is the best way to retrieve data from Firebase and then navigate to a different page?

I am facing an issue with my app where I have a function that retrieves data from Firebase. However, after the completion of this Firebase function, I need to redirect it to another page. The problem is that when I press the button, the redirection happe ...

javascriptjqueryfirebase

Is it necessary to decode the JSON data stored in the variable?

Consider the code snippet below: var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var responses = JSON.parse(this.responseText); var ...

javascriptjson

Choose a particular character in a text that corresponds with a regular expression in Javascript

I am looking to replace the symbols < and > within the text. I have constructed a regular expression as follows: (<span[^>]+class\s*=\s*("|')subValue\2[^>]*>)[^<]*(<\/span>)|(<br(\/*)>) This ...

javascriptregex

What is the process for setting up a Schema and express router in the MERN stack?

Working with a MongoDB record that looks like this: { "_id": { "$oid": "5c09ae281646e8d8bad07d73" }, "name": "somename", "genre": "somegenre", "indexes": { "index1": 1, "index2": 7, "index3": 7, ...

javascriptnode.jsreactjsmongodbexpress

Incorrect variable value retrieved in AJAX callback

I am working on a code that utilizes JSON to validate VAT numbers. My main goal is to identify which VAT numbers are valid BTW[0] = 'NL1234567890'; BTW[1] = 'NL1233537891'; BTW[2] = 'NL1232346894'; var arraylength = BTW.leng ...

javascriptjson

What causes async / await function to be executed twice?

I am currently developing a node.js application using express. In this project, I have implemented a regular router that performs the following tasks: It searches for the myID in the DB, If the myID is found, it attempts to execute the addVisit() functio ...

javascriptnode.jsexpressasync-awaitsequelize.js

Encountered an issue while trying to retrieve a value from an object within a

Reviewing the following JSON response: [ {"name": "Afghanistan", ...}, {"name": "country 2" ,...}, {"name": "country 3" ,...}, ] My goal is to extract only country names from t ...

javascriptjson

Populate a database with information collected from a dynamic form submission

I recently created a dynamic form where users can add multiple fields as needed. However, I'm facing a challenge when it comes to saving this data into the database. You can view a similar code snippet for my form here. <form id="addFields" me ...

javascriptphpjqueryhtmlforms

The grandchild of sibling A sends out a signal, prompting the parent to make necessary adjustments in the value, however sibling B

This template serves as the parent with 2 child components <payment :isEditing="isEditing" @action="onActionButtonClick" /> <create-details v-if="isCompanyDetailsCreating" @action="onActionButtonClick" /> ...

vue.jsvuejs3vue-composition-apivue-reactivity

Setting the default option in an ion-select with data binding in Ionic Vue

Within my Ionic Vue selection, I have encountered an issue: <template> <ion-item> <ion-label>Typ</ion-label> <ion-select interface="action-sheet" value="expense"> <ion-select-option value ...

vue.jsionic-frameworkselect

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

My goal is to use Lodash to search for specific integer values in an object and then store some of those values in an array. The integers are variable and come from a separate array, but I am consistently getting undefined as the result. If I manually inp ...

javascriptnode.jsobjectlodash

What is the best way to implement a personalized hook in React that will return the number of times a specific key is pressed?

I'm working on a custom hook that should give me the key pressed, but I've noticed that when I press the same key more than twice, it only registers twice. Here's my code: import { useEffect, useState } from "react" function useKe ...

javascriptreactjsreact-hooks

Ways to display a tooltip on a listbox that can be moved

My ASPX page contains the following control: <asp:ListBox ID = "X" runat="Server" CssClass = "listbox"></asp:ListBox> I need to display a tooltip on each list item, as they are movable and their positions can be c ...

javascriptc#jqueryasp.netlistbox