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

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

表格屏幕：

API日志屏幕：

Answer 1

在<v-select>组件上，您定义了return-object和item-value="id"道具。使用返回对象将通过从v-select组件而不是ID中返回整个对象来覆盖项值。在这种情况下，您只需从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>

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

另一种替代移除返回对象属性的方法可能是修改您的API端点以期望对象而不是int。

此外，我不建议在<v-form>组件上使用“ method”和“ action”属性。而是将click事件处理程序放在调用方法的表单的提交按钮上。然后，该方法应获取数据并通过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);
    });
  }
}

Vuetify v-form发布不发送数据

1 个答案: