Vuetify v-form post 不发送数据

Posted 2023-02-22

【中文标题】Vuetify v-form post 不发送数据

【英文标题】：Vuetify v-form post does not send data

【发布时间】：2019-11-18 08:47:44

【问题描述】：

请原谅我翻译的英语:)

我创建了一个基本表单来查看我是否使用 vuetify 在我的 API 中获取数据，但是，在提交数据时未发送 v-select 数据，我无法理解原因，因为通常这些表单的示例确实没有真正发出请求 POST，遵循我正在使用的代码的 sn-ps：

<v-form method="post" action="http://127.0.0.1:3000/produtos">
  <v-text-field name="escola" v-model="name" required :rules="nameRules"></v-text-field>
  <v-select
    v-model="selectPessoa"
    :items="pessoas"
    :rules="[v => !!v || 'Item is required']"
    item-value="id"
    item-text="nome"
    label="itens"
    required
    name="pessoa"
    return-object
    value="id"
  ></v-select>
  <v-btn color="warning" type="submit">Submit</v-btn>
</v-form>

摘自javascript代码：

data()
    return  pessoas: [ id: 1, nome: "sandro" ,
                        id: 2, nome: "haiden" ], 
             name: '',
             selectPessoa: null,
    

我在 API 节点中获得的 v-text-field 中键入的信息，但 v-select 中的信息没有：

表格屏幕：

API 日志屏幕：

【参考方案1】：

在<v-select> 组件上，您定义了return-object 和item-value="id" 属性。使用 return-object 通过从 v-select 组件返回整个对象而不是仅返回 id 来覆盖 item-value。在这种情况下，您只需从 <v-select> 组件中删除 return-object 属性即可解决您的问题。

<v-select
  v-model="selectPessoa"
  :items="pessoas"
  :rules="[v => !!v || 'Item is required']"
  item-value="id"
  item-text="nome"
  label="itens"
  required
  name="pessoa"
  return-object <------REMOVE THIS!!!
  value="id"
></v-select>

Vuetify v-select 文档：https://vuetifyjs.com/en/components/selects

除了删除 return-object 属性之外，另一个选项可能是修改您的 API 端点以期望一个对象而不是一个 int。

另外，我不建议在<v-form> 组件上使用“方法”和“动作”属性。相反，在调用方法的表单的提交按钮上放置一个单击事件处理程序。然后该方法应获取数据并通过 AJAX 调用将其发送到 API 端点。

在表单组件上

之前：<v-form method="post" action="http://127.0.0.1:3000/produtos">

之后：<form @submit.prevent>

在按钮组件上

之前：<v-btn color="warning" type="submit">Submit</v-btn>

之后：<v-btn color="warning" @click="submit">Submit</v-btn>

在方法中有一个函数做这样的事情（在我的例子中使用 axios，不确定你的项目使用的是什么）：

methods: 
  submit () 
    let data =  name: this.name, selectPessoa: this.selectPessoa 
    axios.post('http://127.0.0.1:3000/produtos', data)
    .then(function (response) 
       console.log(response);
    )
    .catch(function (error) 
       console.log(error);
    );