Good day everyone!
I'm new in using Vue.JS and I'm having a problem in posting object using axios and all the properties received a null values.
Here's my simple Model:
public class Employees
{
public int Id {get;set;}
public string Firstname {get;set;}
public string Lastname {get;set;}
}
Here's my html and vue.js codes for posting
<div id="app">
<form>
<input type="text" v-model="Firstname" />
<input type="text" v-model="Lastname" />
<button type="button" @@click="submitInfo"> Submit </button>
<! -- In Razor, we use @@ instead of single @ in order to use the shorthand code of vue.js for @ -->
</form>
</div>
<!-- All scripts are imported in the layout page so vue.js and axios.js is already in there -->
@section Scripts{
<script>
var app = new Vue({
el: "#app",
data:{
Firstname: "",
Lastname: ""
},
methods:{
submitInfo(){
axios.post("Employees/Create",this.data)
.then(function(response){...})
.catch(function(error){...});
}
}
});
</script>
}
And here's my controller that receives the null info.
[HttpPost]
public async Task<IActionResult> Create(Employees employees)
{
...
}
When I put breakpoint in the Create method, it successfully triggers the break point so it means that from client to back-end, there are connected. But the problem is, when I check the values of employees, they are all null.