I am tasked with binding the data from my input into my vuejs model-so that when the text change happens, it updates in the model. I tried putting the.UnitName inside the model, but that doesnt work either. Can someone give me some insight on how to do 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>Your data must be a function that returns an object, then you just need to bind the onclick of your button. Remember to preventDefault on the form submission, so your page doesn't reload.
new Vue({
el: "#app",
data(){
return {
UnitName:''
}
},
methods: {
toggle: function(todo){
todo.done = !todo.done
},
onSubmit(event){
event.preventDefault();
alert(this.UnitName);
$.ajax({
url: "",
type: "POST",
data: {
"UnitName": this.UnitName,
},
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" @click="onSubmit">Create</button>
</div>