Vue.js vuejs：在确认提示之前更改 HTML

发布于08月20日

我使用vue.js的目标是在出现确认提示之前更改HTML.

index.html个

    <div id='vueexample'>
        <button @click="colorFunction()">Click me!</button>
    <p v-if="userIsDeciding" style="background-color: yellow;">The user has to decide.</p>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js'></script>
<script>
new Vue({
    el: '#vueexample',
    data: { userIsDeciding: false },
    methods: {
        colorFunction: function() {             
            this.userIsDeciding = true; 
      if(confirm("please confirm")){
        //some stuff
      } 
            this.userIsDeciding = false;    
        }
    }
});
</script>

(Here is the fiddle.)个

问题是:在确认提示符之前没有显示P标记.

我的问题是:如何使p-tag在确认提示符前显示？

任何帮助我都很感激，❤️

推荐答案

您可以try 使用setTimeout函数:

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>