I've encountered an interesting challenge with my Vue.js app. Currently, the modal is displayed correctly when a button is clicked using the show() method:
<script>
export default {
methods: {
show() {
console.log("showing modal")
this.$modal.show("set-game-name");
},
...
Everything works smoothly when triggered by a button press in the template:
<button @click="show">Click</button>
The issue arises when attempting to display the modal based on a URL parameter and store it in Vuex. I have successfully updated a Vuex store variable from the URL search string in App.vue:
created() {
if (location.search.match(/walkThrough/) {
this.$store.dispatch("updateWalkThrough", true)
}
}
The variable is properly set in the Vuex store. In the modal component's created hook, I check for the value of walkThrough:
created() {
console.log(this.walkThrough)
if (this.walkThrough) {
this.show() // Same show function as above
}
The log confirms that walkThrough has the correct value and "showing modal" is logged; however, the modal fails to appear. Strangely, no errors are shown in the console. Any suggestions or alternative life-cycle hooks that could be causing this behavior?