How to POST data form as JSON using API in VueJS

Question

I create a form using GET from API. After I've created that form, I want to POST the form data back to the API, encoded as JSON. How do I do that?

I have this simple text field:

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

How do I validate and POST the data?

The actual POST doesn't seem to be related to vue or vuetify but javascript in general. For the validation you need to be a little more specific, for example: What kind of validation do you want to do? It would really help if you added your <script> </script> block too — discolor
– discolor, Commented Mar 10, 2020 at 12:47
Sidenote: "According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate." (w3schools) Not adopting these as a habit, even in draft code, might be a worthwhile idea. — fbmd
– fbmd, Commented Jun 29, 2023 at 11:16

discolor · Accepted Answer · 2020-03-10 14:30:35Z

3

Since I don't know what you're using to call your API I just assume you're using Axios.

Easiest would be to create a method and in that method you create a 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);
    });
  }
}

To handle validation we need more information on what you're trying to validate. Empty textboxes? Only specific inputs such as numbers? Check for a maximum character count?

answered Mar 10, 2020 at 14:30

discolor

1,39610 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muhammad Wazexr Over a year ago

Yes, I use Axios. Thanks. But my form get data by API too, so how to select question with answer together?

discolor Over a year ago

I'm really sorry but I don't understand what you're asking of. Can you maybe provide a codesandbox or codepen as an example?

discolor Over a year ago

In line 14 you set this.survey, but survey was never defined in the data(). I suggest you check out more simple vue examples before diving into APIs. Adressing everything in the codepen would be too much for a comment here, sorry

Collectives™ on Stack Overflow

How to POST data form as JSON using API in VueJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related