CODEWITHSUNDEEP
vue.jsvuetify.js
Muhammad Wazexr
Muhammad Wazexr

Reputation: 153

How to POST data form as JSON using API in VueJS

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?

Upvotes: 2

Views: 3963

Answers (1)

discolor
discolor

Reputation: 1396

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?

Upvotes: 3

Related Questions