如何在 VueJS 中使用 API 将数据表单作为 JSON 发布答案

【问题标题】：How to POST data form as JSON using API in VueJS如何在 VueJS 中使用 API 将数据表单作为 JSON 发布
【发布时间】：2020-06-22 06:14:17
【问题描述】：

我使用来自 API 的 GET 创建了一个表单。创建该表单后，我想将表单数据发布回 API，编码为 JSON。我该怎么做？

我有这个简单的文本字段：

<template v-if="questions.question_type == 1">
 <div class="title-1"><b>{{questions.question_title}} -</b> {{questions.question_desc}}
 </div>
 <v-text-field required :v-model="questions.question_tag" color="green darken-1" clearable></v-text-field>
</template>

如何验证和发布数据？

【问题讨论】：

实际的 POST 似乎与 vue 或 vuetify 无关，但通常与 javascript 相关。对于验证，您需要更具体一些，例如：您想要进行什么样的验证？如果您也添加了块，这将非常有帮助
好的，我想先发布数据

标签： vue.js vuetify.js

【解决方案1】：

因为我不知道你用什么来调用你的 API，所以我假设你使用的是 Axios。

最简单的方法是创建一个方法，然后在该方法中创建一个 POST。

data() {
  return {
    questions: {
      question_tag: "" // Your value in your v-text-field
    }
  }
},
methods: {
  sendData() {
    axios.post('https://yourServer/your/api/endpoint', {
      questionTags: this.questions.question_tag
    })
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.log(error);
    });
  }
}

为了处理验证，我们需要有关您要验证的内容的更多信息。空文本框？只有特定的输入，例如数字？检查最大字符数？

【讨论】：

是的，我使用 Axios。谢谢。但是我的表单也是通过API获取数据的，那么如何选择问题和答案呢？
我真的很抱歉，但我不明白你在问什么。你能提供一个codesandbox或codepen作为例子吗？
在第 14 行中，您设置了 this.survey，但调查从未在 data() 中定义。我建议您在深入研究 API 之前查看更多简单的 vue 示例。在这里评论代码笔中的所有内容都太多了，抱歉