title: Passing data from Vue.js to PHP using Axios
body: <p>I am trying to transmit some data from a GUI done in Vue.js to a PHP file using Axios. I tried both with GET and POST parameters but it does not work:</p>
  
  <p>I type the data in this <strong>index.php</strong> <em>form</em>:</p>
  
  <p><a href="https://i.stack.imgur.com/gEwmO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gEwmO.png" alt="enter image description here"></a></p>
  
  <p><strong>index.php:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;HTML&gt;
  &lt;head&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;BODY&gt;
      &lt;div id="container" class="container"&gt;
          &lt;div&gt;
              &lt;label&gt;First name:&lt;/label&gt;&lt;br/&gt;
              &lt;input type="text" v-model='newPerson.firstName'&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;Last name: &lt;/label&gt;&lt;br/&gt;
              &lt;input type="text" v-model="newPerson.lastName"&gt;
          &lt;/div&gt;
          &lt;button v-on:click="sendIdentity()"&gt;Submit&lt;/button&gt;       
      &lt;/div&gt;    
      &lt;script src="myjscode.js"&gt;&lt;/script&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p><strong>myjscode.js:</strong></p>
  
  <p>When I press the button to submit the data, I see the right output in <code>console.log(response.data)</code>:</p>
  
  <pre><code>let vm = new Vue({
      el: "#container",
      data: {
          newPerson: {
              firstName: '',
              lastName: ''
          }
      },
      methods: {
          sendIdentity: function() {
              let personForm = vm.toFormData(vm.newPerson);
              axios.post('phpfile.php', personForm)
                  .then( function(response) {
                      console.log(response.data)
                  });
          },
          toFormData: function(obj) {
              let formData = new FormData();
              for(let key in obj) {
                  formData.append(key, obj[key]);
              }
              return formData;
          }
      }
  });
  </code></pre>
  
  <p><strong>phpfile.php:</strong></p>
  
  <p>On this file, I am rather performing an insertion into a MySQL table, however it never takes effect. I removed the MySQL code and let only what follows, where I notice I always get the message <code>Data not received</code> when I run this file:</p>
  
  <pre><code>&lt;?php
  if( isset($_POST['firstName']) &amp;&amp; isset($_POST['lastName'])){
     echo $_POST['firstName'];
     echo $_POST['lastName'];      
  } else {  
     echo 'Data not received';
  }
  ?&gt;
  </code></pre>
  
  <p>What am I missing?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I noticed when I changed the <strong><em>myjscode.js</em></strong> above like ths:</p>
  
  <pre><code>axios.post('phpfile.php?todo=something', ...)
  </code></pre>
  
  <p>And then I change <strong><em>phpfile.php</em></strong> to</p>
  
  <pre><code>&lt;?php
  
  if( isset($_GET['todo']) ){
     echo $_GET['todo'];
  } else {
     echo 'No todo';
  }
  ?&gt;
  </code></pre>
  
  <p>I am getting <em>No todo</em> always displayed on the PHP file. So sending data both via GET and POST do not work in this situation.</p>