首页 > 解决方案 > 如何使用 VueJS 中的 API 将数据表单作为 JSON 发布

问题描述

我使用来自 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>

如何验证和发布数据?

标签: vue.jsvuetify.js

解决方案


因为我不知道你用什么来调用你的 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);
    });
  }
}

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


推荐阅读