Error updating database with form vue.js + MongoDB

Question

I am getting an error with the Update page of my CRUD application.

This is the form that is used for creating and updating:

<template>
  <form @submit.prevent="submitForm">
    <div class="field">
      <label class="label">Client Name</label>
      <div class="control">
        <input
          v-model="ticket.client.value"
          class="input"
          type="text"
          name="client"
          placeholder="Name"
          required
        />
      </div>
    </div>

    <div class="field">
      <label class="label">Description</label>
      <div class="control">
        <textarea
          v-model="ticket.description.value"
          class="textarea"
          rows="4"
          type="text"
          name="description"
          placeholder="Describe the problem..."
        ></textarea>
      </div>
    </div>

    <div class="field">
      <label class="label">Support User</label>
      <div class="control">
        <input
          v-model="ticket.supportUser.value"
          class="input"
          type="text"
          name="supportUser"
          placeholder="Name"
          required
        />
      </div>
    </div>

    <div class="field">
      <label class="label">Status</label>
      <div class="select is-danger">
        <select required v-model="ticket.status.value" name="status">
          <option value=true>Open</option>
          <option value=false>Closed</option>
        </select>
      </div>
    </div>

    <button type="submit" class="button is-success">Create Ticket</button>
  </form>
</template>

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

<style></style>

Here is the Update view:

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

<script>
import TicketForm from '@/components/TicketForm.vue';
import { ref } from '@vue/composition-api';
import { useRouter } from '@u3u/vue-hooks';

export default {
  components: {
    TicketForm,
  },

  setup() {
    const { router, route } = useRouter();
    const ticket = ref({
        client: '',
        description: '',
        supportUser: '',
        status: 1,
    });
    const API_URL = 'http://localhost:5000/api/v1/tickets';

    async function updateTicket() {
      const response = await fetch(API_URL, {
        method: 'PUT',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          client: ticket.value.client,
          description: ticket.value.description,
          supportUser: ticket.value.supportUser,
          status: ticket.value.status,
        }),
      });
      const json = await response.json();
      console.log(json);
      if (response.ok) {
        //redirect
        router.push({
          name: "home"
        });
      } else {
        //error
        console.log(Error);
      }
    }

    async function getCurrentTicket() {
        const { id } = route.value.params;
        const response = await fetch(`${API_URL}/${id}`);
        const json = await response.json();
        ticket.value = json;
        console.log(ticket.value.description);
    }

    getCurrentTicket();


    return {
      ticket,
      updateTicket,
    };
  },
};
</script>

<style></style>

The error occurs when i go to edit a 'ticket' and start typing in the one of the fields. For example: here are the errors for a ticket where I set the Client Name to be 'client name'

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

any idea what the issue could be?

Answer 1

In your form template you refer to ticket.client.value:

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

but in your Update view your refer to ticket.value.client

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