我有一个用POST请求提交数据的端点,
http://localhost:3000/entry
键是fname,lname,age
我可以向给定的端点发出POST请求,并创建一个条目。
我正在尝试使用VueJS提交表单。但是,当我在表单中调用API时,它不会提交数据。我已经检查了网络调用,它没有向端点发送任何数据。
HTML :-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<div id="vueApp">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3>
Dashboard
</h3>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" value="" v-model="fname" />
</div>
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" value="" v-model="lname" />
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="text" class="form-control" value="" v-model="age" />
</div>
</div>
<div class="col-sm-12">
<a href="#" class="btn btn-success" @click="submitEntry">Submit</a>
<span v-if="ajaxRequest">Please Wait ...</span>
</div>
</div>
<div> </div>
<div class="row" v-if="debug">
<div class="col-sm-12">
<pre>{{ $data | json }}</pre>
</div>
</div>
<!-- Table Start -->
<div class="row">
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>{{fname}}</td>
<td>{{lname}}</td>
<td>{{age}}</td>
</tr>
</table>
</div>
<!-- Table END -->
</div>
</div>
script.js :-
Vue.http.options.emulateJSON = true;
new Vue({
el: '#vueApp',
data: {
debug: true,
fname: '',
lname: '',
age: '',
ajaxRequest: false,
postResults: []
},
methods: {
submitEntry: function() {
this.ajaxRequest = true;
this.$http.post('http://localhost:3000/entry', {
fname: this.fname,
lname: this.lname,
age: this.age
}, function (data, status, request) {
this.postResults = data;
this.ajaxRequest = false;
});
}}
});
style.css :-
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
@click.prevent
,同时在submitEntry()
函数内添加一个console.log
来查看它是否被调用。 - Jim Wrightfile:///......./index.html
这样吗?那么 AJAX 就无法工作。 - user5734311x=>...
),因此在其中“this”未绑定(或绑定到错误的对象)。 - birdspider