我的任務是將來自我的輸入的資料系結到我的 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>uj5u.com熱心網友回復：
您的資料必須是一個回傳物件的函式，然后您只需要系結按鈕的 onclick。請記住在表單提交時阻止默認，這樣您的頁面就不會重新加載。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372757.html
標籤：javascript Vue.js