Vuetify v-form post不发送数据

Question

请原谅我翻译的英文:)

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

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

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

表单屏幕：

API日志屏幕：

Answer 1

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

<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);
    });
  }
}