Hello there!
I'm a novice when it comes to Vue.JS and I'm facing an issue while trying to post an object using axios, as all the properties are being received as null values.
Let me share my basic Model:
public class Employees
{
public int Id {get;set;}
public string Firstname {get;set;}
public string Lastname {get;set;}
}
Below are 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>
}
Now, let's take a look at my controller that is receiving null information.
[HttpPost]
public async Task<IActionResult> Create(Employees employees)
{
...
}
When I set a breakpoint in the Create method, it gets triggered successfully, indicating a connection between the client and backend. However, the issue lies in the fact that all the values of 'employees' turn out to be null.