CODEWITHSUNDEEP
javascriptvue.jsvuejs2
mafortis
mafortis

Reputation: 7128

VueJs clear form after success

I need to clear my inputs in modal after my data saved successfully, I've tried several solution I found here such as reset() or myData = ''; but none of them worked for me.

Code

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>

Any idea?

Update

How I get my form data...

data() {
    return {
        //...
        verse: {
            number: '',
            heading: '',
            body: '',
            book_id: '',
            chapter_id: '',
        }
    }
},

Upvotes: 0

Views: 6277

Answers (2)

Srikanth
Srikanth

Reputation: 34

try to bind the response like below.and verify please

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

Upvotes: 2

Narkhede Tushar
Narkhede Tushar

Reputation: 683

You can do something like this:

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

},

Upvotes: 0

Related Questions