VueJs成功后的清晰形式
VueJs成功后的清晰形式
提问于 2019-12-30 05:16:48
在我的数据成功保存之后，我需要清除我的输入模式，我已经尝试了我在这里找到的几种解决方案，比如reset()或myData = '';，但它们都不适合我。
代码
Vue method
submit: function(e) {
axios.post('/api/saveVerse', this.verse)
.then(res => {
this.isLoading = false
$('#exampleModal').modal('toggle');
this.getVerses.push( res.data.verse );
})
.catch(error => {
this.errors = error.response.data.errors
this.isLoading = false
})
},Vue Template
<form @submit.prevent="submit" class="needs-validation" novalidate>
<div class="modal-body">
<div class="form-row">
<div class="col-md-3 mb-3">
<label for="validationTooltip01">Verse Number</label>
<input type="text" class="form-control" id="validationTooltip01" v-model="verse.number" placeholder="Verse Number" required>
<div class="invalid-tooltip">
Verse Number Is Required.
</div>
</div>
<div class="col-md-9 mb-3">
<label for="validationTooltip01">Heading</label>
<input type="text" class="form-control" id="validationTooltip01" v-model="verse.heading" placeholder="Verse Heading">
<div class="valid-tooltip">
Heading Looks Good!
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationTooltip02">Verse</label>
<textarea name="body" class="form-control" id="validationTooltip02" v-model="verse.body" placeholder="Verse" cols="15" rows="5" required></textarea>
<div class="invalid-tooltip">
Verse Body Is Required.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>有什么想法吗？
更新
我如何得到我的表格数据..。
data() {
return {
//...
verse: {
number: '',
heading: '',
body: '',
book_id: '',
chapter_id: '',
}
}
},回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-30 05:43:36
请尝试绑定响应，如below.and验证
submit: function(e) {
axios.post('/api/saveVerse', this.verse)
.then(res => {
this.isLoading = false
$('#exampleModal').modal('toggle');
this.getVerses.push( res.data.verse );
// resetting your v-model:
this.verse = {
number: '',
heading: '',
body: ''
};
}).bind(this)
.catch(error => {
this.errors = error.response.data.errors
this.isLoading = false
})
},Stack Overflow用户
发布于 2019-12-30 05:23:45
你可以这样做：
submit: function(e) {
axios.post('/api/saveVerse', this.verse)
.then(res => {
this.isLoading = false
$('#exampleModal').modal('toggle');
this.getVerses.push( res.data.verse );
// resetting your v-model:
this.verse = {
number: '',
heading: '',
body: ''
};
// Try this also...
e.preventDefault();
})
.catch(error => {
this.errors = error.response.data.errors
this.isLoading = false
})},
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59526014
复制相关文章
相似问题
腾讯云开发者
