Vuejs和axios添加空字段而不是插入数据

Question

I have been trying to build a crud using vuejs,axios and php i am working with separate xampp server and Node server everything is working fine except the insert whenever i insert any data an empty field is also added into the database along with the data Here is my vue and axios code

export default{
data(){
return{
    title:'Insert Record',
    Lname:'',
    Fname:''

}
}

 },methods:{
insert(){
 this.$router.push('/')
 axios.post('http://localhost/insert.php', 
{Fname:this.Fname,Lname:this.Lname })
  .then(function(response){
   if(response)
  {

console.log(response)
alert('Data Has Been inserted')
}

});  
 }


} 
  }
     </script>

And Here is my php code

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
$conn = mysqli_connect('localhost','root','','ajax');
$data = json_decode(file_get_contents("php://input"), true);
$Fname = $data['Fname'];
$Lname = $data['Lname'];
json_encode(array('Fname'=>$data['Fname'],'Lname'=>$data['Lname']));
$userData = mysqli_query($conn,"INSERT INTO names  (Fname,Lname) VALUES ('$Fname','$Lname')");
if($userData){
    echo json_encode(array('inserted'=>true));
}