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

Question

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

当我去编辑 'ticket' 并开始在其中一个字段中输入时发生错误。例如：这是我将客户名称设置为 'client name'

的工单错误

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

知道问题出在哪里吗？

Answer 1

在您的表单模板中，您指的是 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,

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

Error updating database with form vue.js + MongoDB

javascript

crud

mongodb

vue.js

mern