如何使用http请求将Vue表单输入发送到Adonis控制器
问题描述:
因此,我的Vue组件要求用户输入他的电子邮件。我使用v-model
进行数据绑定。如何使用http请求将Vue表单输入发送到Adonis控制器
<template>
<input v-model="email" type="text" placeholder="Email" />
<button class="tiny">Send</button>
</template>
<script>
export default {
data: function() {
return {
email: ''
}
}
}
</script>
我MailController
在阿多尼斯应该能够接收用户的电子邮件作为输入。我想象这样的事情:
'use strict';
class MailController {
*mail (request, response) {
const email = request.input('email');
}
}
应该是什么让email
的正确方法是什么?
答
1)NPM安装VUE资源--save
2)在您的VUE的主要JS文件
var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);
3)更改您的组件文件中像这样
<template>
<input v-model="email" type="text" placeholder="Email" />
<button @click="submit()" class="tiny">Send</button>
</template>
<script>
export default {
data: function() {
return {
email: ''
}
},
methods: {
submit: function() {
this.$http.post('/your-url', {email: this.email})
.then(
(response) => {
console.log(response);
},
(error) => {
console.log(error);
}
);
}
}
}
</script>