使用 vue.js + MongoDB 更新数据库时出错

如何解决使用 vue.js + MongoDB 更新数据库时出错

我的 CRUD 应用程序的更新页面出现错误。

这是用于创建和更新的表单：

<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>

这是更新视图：

<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>

当我去编辑一张“票”并开始在其中一个字段中输入时发生错误。例如：这是我将客户端名称设置为“客户端名称”的票证错误

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

部分： 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

知道可能是什么问题吗？

解决方法

在您的表单模板中，您引用 ticket.client.value：

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

但在您的更新视图中，您引用了 ticket.value.client

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