我的任务是将输入中的数据绑定到我的vuejs模型中，这样当文本发生更改时，它就会在模型中更新。我试着把。UnitName在模型中，但这也不起作用。有人能给我一些关于如何做到这一点的见解吗。
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>您的数据必须是一个返回对象的函数，然后您只需要绑定按钮的onclick。请记住在表单提交时防止Default，这样您的页面就不会重新加载。
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>