Can't post with vue.js

Question

I want to post the form data using "vue-resource", but I get an error. I wrote the code with vue-cli and vuetify.

Error

[Vue warn]: Error in v-on handler: "TypeError: this.$http.post(...).error is not a function"

App.vue

<template>
  <v-app>
    <v-main>
      <v-container class="px-0">
        <v-form ref="form" @submit="addEvent">
            <p class="text-uppercase">Question？</p>
              <v-radio-group v-model="newEvent.select1" row>
                <v-radio label="aaa" value="aaa"></v-radio>
                <v-radio label="bbb" value="bbb"></v-radio>
              </v-radio-group>
            <input type="submit" depressed color="primary" value="OK！">
        </v-form>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      users: [],
      newEvent: {
        select1: '',
      }
    }
  },
  methods: {
    addEvent: function (e) {
    e.preventDefault()
        if (this.isValid) {
          console.log("success")
          console.log("select1: " + this.newEvent.select1)

          this.$http.post('URL..', this.newEvent, function (data, status, request) {
            console.log("post success")

            console.log(status)
            }).error(function (data, status, request) {
              console.log("post failed")
            })
        }else{
          console.log("need edit")
        }
      },
  },
    computed: {
      isValid: function () {
        var valid = true
        for (var key in this.data) {
          if (!this.data[key]) {
            valid = false
          }
        }
        return valid
      }
    },
};
</script>

I tried writing "import VueResource from'vue-resource'" in main.js, but it had no effect.

How can I solve it?

Maksim Tikhonov · Accepted Answer · 2020-09-08 08:26:28Z

1

Try use axios or fetch

// install axios first

import axios from 'axios'

// ... some code here

axios.post(url, data).then(response => {}).catch(error => {})


// or you can use fetch

let response = await fetch(url, { method:'POST', headers: {'Content-Type': 'application/json;charset=utf-8'}, body: JSON.stringify(data) })

// getting result
let json = await response.json()

edited Sep 8, 2020 at 8:26

answered Sep 8, 2020 at 8:21

Maksim Tikhonov

7906 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Can't post with vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related