javascript - 成功后VueJs清晰的表格

Question

成功保存数据后，我需要清除模态中的输入，我尝试了在这里找到的几种解决方案，例如 reset() 或 myData = ''; 但它们都不适合我。

代码

Vue方法

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 模板

<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: '',
        }
    }
},

Answer 1

尝试绑定(bind)如下响应。请验证

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
})
},