主页 / coding / 问题 / 76939350
Accepted
jaheraho
Asked: 2023-08-20 20:17:16 +0800 CST

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

  • 772

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

索引.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>

（这是小提琴。）

问题：p-tag 在确认提示之前不显示。

我的问题：如何使 p-tag 在确认提示之前显示？

如有任何帮助，我们将不胜感激❤️

vue.js

2 个回答

  1. 解决方案

    很多人以前都处理过这个问题，也许对此最相关的答案之一——这比setTimeout(..., 0)——是一个包。

    关于这里提到的软件包的使用已经收到了积极的反馈，所以我想我应该检查一下它是如何工作的。这很简单。

    实际上，基本概念是将原生 JavaScript 函数 requestAnimationFrame() 嵌入到其自身中，在每种情况下它似乎总是等待渲染刷新。

    函数的创建者命名为 this function forceNextTick()，可以在没有回调函数的情况下调用它。

    如果没有回调，它将调用doubleRequestAnimationFrame()作为new Promise.

    尝试一下这个包，或者看看它所应用的解决方案的无包实现：

    new Vue({
  el: '#vueexample',
  data() { 
    return { userIsDeciding: false }
  },
  methods: {
    colorFunction: function () {             
      this.userIsDeciding = true; 
      
      // SOURCE
      // https://github.com/vuejs/vue/issues/9200#issuecomment-526996911
      // https://github.com/twickstrom/vue-force-next-tick
      // https://github.com/twickstrom/vue-force-next-tick/blob/e7aaf743bc571a871b9d25353be519b1b72a825d/src/index.js#L1
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          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>

    更多信息

    • 2
  2. Best Answer

    您可以尝试使用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>

    • 1

相关问题