Vue.js和Axios添加一个空字段而不是插入数据

Question

我一直在尝试使用vuejs，axios和php构建一个Crud，我正在使用单独的xampp服务器和Node服务器，除了插入时，一切正常，除了当我插入任何数据时，还将一个空字段也添加到数据库中数据这是我的vue和axios代码

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>

这是我的php代码

<?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));
}