Are you sure you have access to this inside the then() function?
Try binding thisto the function:
}).then(function(){
this.$data = initialState();
}.bind(this), function(dismiss) {
I have a component where I upload a file, and would like to implement a check if a user wants to navigate before the file is uploaded or if he has some unsaved changes in the form. For that I am using sweetalert2.
I have created a function for initial state of the data initialState (), and would like to when the sweetalert is executed, on confirm reset the data to initial state with this function. But not sure how to reset it with the sweetalert. I have tried with putting this.$data = initialState(); inside then function of sweetalert but that is obviously not working. How should I do that?
This is the complete component:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Upload <button class="btn btn-default" @click="cleanForm">New video</button></div>
<div class="panel-body">
<div class="form-group" v-if="!uploading">
<label for="video">Upload a video</label>
<input type="file" name="video" id="video" @change="fileInputChange">
</div>
<div class="alert alert-danger" v-if="failed">Something went wrong. Please try again.</div>
<div id="video-form">
<div class="alert alert-info" v-if="uploading && !failed && !uploadingComplete">
Your video will be available at <a href="{{ $root.url }}/videos/{{ uid }}" target="_blank">{{ $root.url }}/videos/{{ uid }}</a>.
</div>
<div class="alert alert-success" v-if="uploading && !failed && uploadingComplete">
Upload complete. Video is now processing. <a href="/videos">Go to your videos</a>.
</div>
<div class="progress" v-if="uploading && !failed && !uploadingComplete">
<div class="progress-bar" v-bind:style="{ width: fileProgress + '%' }"></div>
</div>
<div class="form-group" v-if="!uploading">
<label for="link">Or paste a link from youtube or vimeo</label>
<input type="text" class="form-control" v-model="link">
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" v-model="title">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" v-model="description"></textarea>
</div>
<div class="form-group">
<label for="visibility">Visibility</label>
<select class="form-control" v-model="visibility">
<option value="private">Private</option>
<option value="unlisted">Unlisted</option>
<option value="public">Public</option>
</select>
</div>
<span class="help-block pull-right">{{ saveStatus }}</span>
<button class="btn btn-default" type="submit" @click.prevent="update">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
function initialState (){
return {
uid: null,
uploading: false,
uploadingComplete: false,
failed: false,
title: null,
link: null,
description: null,
visibility: 'private',
saveStatus: null,
fileProgress: 0
}
}
export default {
data: function (){
return initialState();
},
methods: {
fileInputChange() {
this.uploading = true;
this.failed = false;
this.file = document.getElementById('video').files[0];
this.store().then(() => {
var form = new FormData();
form.append('video', this.file);
form.append('uid', this.uid);
this.$http.post('/upload', form, {
progress: (e) => {
if (e.lengthComputable) {
this.updateProgress(e)
}
}
}).then(() => {
this.uploadingComplete = true
}, () => {
this.failed = true
});
}, () => {
this.failed = true
})
},
store() {
return this.$http.post('/videos', {
title: this.title,
description: this.description,
visibility: this.visibility,
extension: this.file.name.split('.').pop()
}).then((response) => {
this.uid = response.json().data.uid;
});
},
update() {
this.saveStatus = 'Saving changes.';
return this.$http.put('/videos/' + this.uid, {
link: this.link,
title: this.title,
description: this.description,
visibility: this.visibility
}).then((response) => {
this.saveStatus = 'Changes saved.';
setTimeout(() => {
this.saveStatus = null
}, 3000)
}, () => {
this.saveStatus = 'Failed to save changes.';
});
},
updateProgress(e) {
e.percent = (e.loaded / e.total) * 100;
this.fileProgress = e.percent;
},
cleanForm() {
if(this.uploading) {
this.confirm('Your video is still uploading, are you sure you want to navigate away?');
}
else if(!this.failed && this.uploadingComplete && this.title != null && this.saveStatus == null){
this.confirm('You have some unsaved changes, are you sure you want to navigate away?');
}
else {
this.$data = initialState();
}
},
confirm(message) {
swal({
title: message,
text: null,
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancel",
cancelButtonColor: '#FFF',
confirmButtonColor: "#2E112D",
confirmButtonText: "Yes, delete"
}).then(function(){
this.$data = initialState();
}, function(dismiss) {
// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those
// ignore
} else {
throw dismiss;
}
})
}
},
ready() {
window.onbeforeunload = () => {
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm('Are you sure you want to navigate away?');
}
}
}
}
</script>
Are you sure you have access to this inside the then() function?
Try binding thisto the function:
}).then(function(){
this.$data = initialState();
}.bind(this), function(dismiss) {
Please or to participate in this conversation.