I need help figuring out how to bind data from my input field into my Vue.js model. I've tried putting the UnitName inside the model but it's not working. Can someone provide some guidance on how to achieve this?
new Vue({
el: "#app",
data: {
UnitName:'',
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
$( document ).ready(function() {
$("#myMagic").click(function(){
alert("test");
$.ajax({
url: "",
type: "POST",
data: {
"UnitName": "bobby",
},
headers: {
"content-type": "application/x-www-form-urlencoded"
},
})
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://s.brightspace.com/lib/jquery/2.2.4/jquery.min.js" role="presentation"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app" class="container">
Title <input v-model="UnitName">{{UnitName}}<br><br>
<button class="btn btn-primary" id="myMagic">Create</button>
</div>