Issue encountered while updating database using form in vue.js + MongoDB

I am encountering an issue with the Update functionality on my CRUD application.

Below is the form that is utilized for both creating and updating:

<template>
  <form @submit.prevent="submitForm">
    ...
  </form>
</template>

<script>
export default {
  props: ["submitForm", "ticket"]
};
</script>

<style></style>

Here is the Update view template:

<template>
  <TicketForm :ticket="ticket" :submitForm="updateTicket" />
</template>

...

The error occurs when attempting to edit a 'ticket' and inputting data in one of the fields. For instance, when setting the Client Name as 'client name', the following errors occur:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: client name

partial:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot use 'in' operator to search for 'value' in client name at Proxy.set (vue.runtime.esm.js?2b0e:1076) at input

Do you have any insights on what might be causing this issue?

Answer №1

Your form template includes a reference to ticket.client.value:

<input
  v-model="ticket.client.value"
  class="input"
  type="text"
  name="client"
  placeholder="Name"
  required
/>

However, in your Update view, you are referencing ticket.value.client

body: JSON.stringify({
  client: ticket.value.client,
  description: ticket.value.description,
  supportUser: ticket.value.supportUser,
  status: ticket.value.status,

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

Is there a way to restrict input to only letters and one underscore in a consecutive sequence?

Having trouble creating an input that requires the first character to be a letter, and subsequent characters to be either letters or a single underscore at a time? I attempted to implement the following JavaScript code for an input field: var nick = docum ...

How come the back button does not initiate client-side navigation in a Next.js application?

In my Next.js application utilizing GraphQL to fetch articles from a server, I encountered an issue with dynamic routing when reloading the page while on an article and attempting to navigate back. The usual scenario works as expected: Index -> [slu ...

Angular user profile update button not functioning as expected

We are currently implementing Angular alongside Node.js Express. Our issue arises when attempting to update user details from the settings page, as clicking the update button triggers the following error: Failed to load resource: net::ERR_CONNECTION_RESET ...

How can I deactivate a particular button in a React application?

Is there a way to selectively disable a button from a set of buttons that are generated from server data? I need to disable a specific button, even if there are many others, and also make it so that a button becomes permanently disabled once clicked. How ...

include in the subsequent function's .each operation

Below is the function that I am currently using: $(".formact").validate({ submitHandler: function (form) { $.ajax({ type: "POST", url: "act_cant.php", data: $(".formact").serialize(), beforeSend: function() { ...

Calculate how frequently an element showcases a particular style

I attempted to tally the occurrences of a specific class on an element, but I keep encountering the error message: $(...)[c].css is not a function Does jQuery have it out for me? Below is the code snippet in question: // hide headings of empty lists le ...

Obtain a collection of the corresponding keys for a given value from dictionaries

I'm implementing a function that retrieves a list of keys associated with a specific value in the dictionary. Although I am able to print out the first key successfully, I'm facing difficulties in displaying subsequent keys. I understand that I ...

Error: 'err' has not been defined

Recently, I embarked on creating my very first API using Mongo, Express and Node. As I attempted to establish an API endpoint for a specific user, the console threw me this error: ReferenceError: err is not defined. Curiously, the same method worked flawle ...

Combining Multiple Optional Async AJAX Calls

In my Angular 1.5.8 app, I have different views that require various combinations of the same 3 ajax requests. Some views need data from all three endpoints, while others only need data from one or two. To efficiently manage the retrieval of this data, I ...

Utilizing Express and ejs to display a JSON using the "<%" tag

I am facing an issue with the code in my index.ejs file. The current code snippet is as follows: var current_user = <%= user %> In my node.js file, I have the following code: app.get("/", function(req, res){ res.locals.user = req.user res. ...

What is the best way to assess a scope object within an ng-Class directive?

Whenever I click a button, it moves to the next item in an array. Once it reaches the last item in the array, I want to assign the "endButton" class to the button tag. I plan to use the ng-class directive within the HTML code to evaluate the expression. T ...

Creating a tree array in JavaScript from JSON data

I have been struggling to create a tree array from the given JSON data. I have attempted to use filter, map, and reduce methods, but haven't been successful in achieving the desired result. [{ "code": "2", "name": "PENDING" },{ "code": "2.2", ...

Using the -g flag in Node.js consistently results in error messages

Whenever I attempt to install something globally with node, I encounter a series of errors. Interestingly, when I tried it in Powershell, no errors were thrown, but I suspect this is due to the fact that I was using Powershell instead of the official Node ...

Integrating AngularJS code into dynamically generated HTML using JavaScript

I am currently utilizing an outdated version of AngularJS (1.3). I have a page where I need to dynamically display different content based on database values. If the user interacts with the page and changes the database value, I want the displayed content ...

Encountering an issue while setting up a MongoDB-Replica-Set within a docker container using x509 authentication: Container fails to start due to tls

Currently, I am facing difficulties setting up a Docker cluster/replica-set with TLS authentication enabled. We are utilizing the mongodb:7 (latest) docker container sourced from the official Docker Hub. Despite overcoming challenges in configuring an ope ...

The React Bit Dev module is showing a 404 error

Attempting to incorporate the semantic-ui-react table reusable component from the Bit.dev community into my application. The link I am using is: To add this component to your application, use: npm i @bit/semantic-org.semantic-ui-react.table However, when ...

Tips for properly aligning an image within an owl carousel

Currently, I am attempting to center a small image within the owl carousel. While I have managed to center it when it's active and in the center, I'm encountering issues when the item no longer carries the "center" class. You can access Owlcarou ...

The functionality of CSSTransition seems to be malfunctioning. Perhaps switching to V2 of react

Can anyone help me troubleshoot my code snippet where I'm attempting to incorporate an animation for Tooltip Nodes? Despite my efforts, the animation does not show up on the screen after mounting. Additionally, the console.log is not triggered on the ...

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...

Unable to avoid clicking on previous dates in v-calendar (Vuetify)

I recently set up a v-calendar following the guidance provided in the Vuetify documentation. However, I'm encountering an issue where I can't seem to disable the click event for past days. This prevents users from creating events on days that hav ...