link2603 link2604 link2605 link2606 link2607 link2608 link2609 link2610 link2611 link2612 link2613 link2614 link2615 link2616 link2617 link2618 link2619 link2620 link2621 link2622 link2623 link2624 link2625 link2626 link2627 link2628 link2629 link2630 link2631 link2632 link2633 link2634 link2635 link2636 link2637 link2638 link2639 link2640 link2641 link2642 link2643 link2644 link2645 link2646 link2647 link2648 link2649 link2650 link2651 link2652 link2653 link2654 link2655 link2656 link2657 link2658 link2659 link2660 link2661 link2662 link2663 link2664 link2665 link2666 link2667 link2668 link2669 link2670 link2671 link2672 link2673 link2674 link2675 link2676 link2677 link2678 link2679 link2680 link2681 link2682 link2683 link2684 link2685 link2686 link2687 link2688 link2689 link2690 link2691 link2692 link2693 link2694 link2695 link2696 link2697 link2698 link2699 link2700 link2701 link2702 link2703 link2704 link2705 link2706 link2707 link2708 link2709 link2710 link2711 link2712 link2713 link2714 link2715 link2716 link2717 link2718 link2719 link2720 link2721 link2722 link2723 link2724 link2725 link2726 link2727 link2728 link2729 link2730 link2731 link2732 link2733 link2734 link2735 link2736 link2737 link2738 link2739

[Vue.js] Cannot set property 'currentStatus' of undefined using this

when trying to show a state of formSubmit in vue.js js. The problem is that when not so familiar with using “this” and when now getting error some places in the code when trying to state the status using “this.currentStatus”.

This is my code:

const STATUS_INITIAL = 0
const STATUS_SAVING = 1
const STATUS_SUCCESS = 2
const STATUS_FAILED = 3
export default {
name: ‘Dashboard’,
data () {
return {
file: ‘’,
uploadError: null,
currentStatus: null,
uploadFieldName: ‘photos’
}
},
computed: {
clientId () {
return parseInt(this.$route.params.id)
},
isInitial () {
return this.currentStatus === STATUS_INITIAL
},
isSaving () {
return this.currentStatus === STATUS_SAVING
},
isSuccess () {
return this.currentStatus === STATUS_SUCCESS
},
isFailed () {
return this.currentStatus === STATUS_FAILED
}
},
methods: {
handleFileUpload () {
this.file = this.$refs.file.files[0]
console.log(this.file)
},
filesChange (fieldName, fileList) {
// handle file changes
const formData = new FormData()

// append the files to FormData
Array
.from(Array(fileList.length).keys())
.map(x => {
formData.append(fieldName, fileList[x], fileList[x].name)
})

// save it
this.submitFile(formData)
},
submitFile (formData) {
this.currentStatus = STATUS_SAVING
console.log(this.currentStatus)
var clientId = this.clientId
var reader = new FileReader()
reader.readAsDataURL(this.file)
reader.onload = function () {
var asim = reader.result
formData.append(‘file’, this.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then(function (res) {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
)
}
}
}
}

And this is my form:

<p v-if=”isSuccess”>
DONE
</p>
{currentStatus}
<form enctype=”multipart/form-data” novalidate>
<input type=”file” placeholder=”Velg en fil” id=”file” ref=”file” v-on:change=”handleFileUpload()”
accept=”application/pdf” class=”input-file” @change=”filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length”>
<p v-if=”isSuccess”>
wow
</p>
<p v-if=”isSaving”>
Uploading { fileCount } files…
</p>
</form>

I followed this guide
The error when getting is this line: (inside the promise)

this.currentStatus = STATUS_SUCCESS

That is little strange for me because this.currentStatus = STATUS_SAVING is working and showing the number “1”, but not inside the promise (.then).

Anyone can see why this is not working inside the promise but outside?

Solution :

You can use arrow function or closure:

var self = this
reader.onload = function () {
var asim = reader.result
formData.append(‘file’, self.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then(function (res) {
console.log(res)
self.currentStatus = STATUS_SUCCESS
console.log(self.currentStatus)
})
)
}

If you want to use arrow function, please try

reader.onload = () => {
var asim = reader.result
formData.append(‘file’, this.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then((res) => {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
)
}

Solution 2:

Try using arrow function instead. Like this:

.then(res => {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})

I believe it’s similar to this.