[SOLVED] vuejs: Changing HTML before confirm-prompt

vuejs: Changing HTML before confirm-prompt

My goal with vue.js is to change the HTML before a confirm-prompt appears.

new Vue({
  el: "#vueexample",
  data: { userIsDeciding: false },
  methods: {
    colorFunction: function () {
      this.userIsDeciding = true;
      if (confirm("please confirm")) {
        //some stuff
      }
      this.userIsDeciding = false;
    },
  },
});

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js'></script>

<div id="vueexample">
  <button @click="colorFunction()">Click me!</button>
  <p v-if="userIsDeciding" style="background-color: yellow">
    The user has to decide.
  </p>
</div>

(Here is the fiddle.)

The problem: p-tag isn't shown before the confirm-prompt.

My question: How can I make p-tag shown before the confirm-prompt?

Any help is appreciated ❤️

Solution

You can try with setTimeout function:

new Vue({
    el: '#vueexample',
    data() { 
    return { userIsDeciding: false }
  },
    methods: {
        colorFunction: function() {             
            this.userIsDeciding = true; 
      setTimeout(() => {
        if(confirm("please confirm")){
        //some stuff
        }   
        this.userIsDeciding = false;
      }, 0)
        }
    }
});

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js'></script>

<div id='vueexample'>
  <button @click="colorFunction()">Click me!</button>
  <p v-if="userIsDeciding" style="background-color: yellow;">The user has to decide.</p>
</div>