[Vuejs]-Why declared field in data with props initial value is undefined?

by

0👍

Your timeout handler is establishing a new context. Instead of

setTimeout(function() {
    console.log(this.mutableShow);
    self.closeModal();
}, 3000);

you could use

setTimeout(() => {
    console.log(this.mutableShow);
    self.closeModal();
}, 3000);

And you’d need to make a similar change to

.then(function(response) {

to

.then(response => {

having said that, though, I’m not sure the code is going to behave as you might want it. Once the users closes the modal, it won’t be possible to open it again since there is no way to make mutableShow equal to true.

Edited to add:

Since you’re defining the self variable, you could also use that.

console.log(self.mutableShow);

Edited to add:

Without knowing specifically what behavior is intended, the best suggestion I can offer is to follow accepted Vue practices. Namely, after the AJAX request succeeds, emit a custom event. Have the parent component listen for that event and, when triggered, change the show prop.

Leave a comment