如何在vue js中通过http帖子发送表单

Question

昨天这个代码今天正在运行，显示：

v-on处理程序中的错误："TypeError:无法读取的属性"get"未定义的"；

我能够在没有axios的情况下发送http get。这是我的vue代码

<template>
<div>
<form id="loginForm">
<input type="text" name="name" v-model="user.name" />
<input type="text" name="email" v-model="user.email" />
<input type="text" name="message" v-model="user.message" />
<button @click="save">send</button>
</form>
</div>
</template>
<script>

export default {
name: "Contact",
components: {

},
data() {
return {
user: {
name: "peter",
email: "[e-mail]",
message: "bla bla bla",
},
};
},
methods: {
save: function () {
let formData = new FormData(document.getElementById("loginForm"));
this.$http
.get("http://link.cursolinux.pt:8080/contacts", formData)
.then((response) => {
console.log(response.body);
});
},
},
};
</script>

对于我的get请求，我正在使用laravel 8

Route::get('/contacts', function (Request $request) {
//get the request
$post = $request->all();

//show the get request 
//return response()->json($post);

//storage in database
AppModelsContact::create($post);
});

Answer 1

您可能想要POST该数据，而不是使用GET。

如果您确实想要GET，则需要将FormData对象传递给URLSearchParams((以转换为查询字符串

const form = document.querySelector('#loginForm'),
fData = new FormData(form),
url = new URL(form.action);
url.search = new URLSearchParams(fData);
console.log(url)

<form id="loginForm" action="https://example.com">
<input name="name" value="foo">
<input name="age" value="28" />
</form>

Answer 2

首先安装vue资源：

npm install vue-resource

然后在文件main.js 中导入vue资源

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')

我的方法是：

methods: {
save: function () {
this.$http
.get(
"http://www.url.domain/contacts?name=" +
this.user.name +
"&email=" +
this.user.email
)
.then((response) => {
console.log(response.body);
});
},
},