I have a very simple code, I am using VueJs PHP and axios for Ajax requests
I have a button that sends data via ajax to a php file per post but it does not recognize post data, I infer that from this error:
Notice: Undefined index: email in /opt/lampp/htdocs/projects/winecommunity/php/index.php on line 2
the HTML
<button @click="sendEmail">Enviar </button>
<p> {{{res}}} </p>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/index.js"></script>
THE php
echo $_POST['email'];
and the js
new Vue({
el: 'body',
data: {
email:'[email protected]',
res:'tu email'
},
methods: {
sendEmail: function (){
var vm = this;
axios.post('php/index.php', {
email:vm.email,
})
.then(function (response) {
vm.res = response.data
})
.catch(function (error) {
console.log(error);
});
}
}
})
Any idea what I need to get php to return my email?
First of all for your code, it is recommended that the element
root
not be the tag<body>
, it even throws an error in the console if it is, so you should wrap the content in a root or parent element.Then to print the values the double keys are used and not 3
{{ valor }}
For the sending of data to work, you must add it to a
FormData
, I would recommend having all the data that will be modified orv-model
in a parent object (postData for the example) to then generate the sending.HTML
VUEJs