Início / coding / Perguntas / 76939350
Accepted
jaheraho
Asked: 2023-08-20 20:17:16 +0800 CST

vuejs: Alterando HTML antes do prompt de confirmação

  • 772

Meu objetivo com vue.js é alterar o HTML antes que apareça um prompt de confirmação.

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>

(Aqui está o violino.)

O problema: p-tag não é mostrado antes do prompt de confirmação.

Minha pergunta: como posso fazer com que o p-tag seja exibido antes do prompt de confirmação?

Qualquer ajuda é apreciada ❤️

vue.js

2 respostas

  1. Solução

    Muitas pessoas já lidaram com isso antes, talvez uma das respostas mais relevantes para isso – que é melhor do que setTimeout(..., 0)– seja um pacote.

    Recebemos feedback positivo sobre o uso do pacote mencionado aqui, então pensei em verificar como ele funciona. É bem simples.

    Na verdade, o conceito básico é incorporar a função nativa do JavaScript requestAnimationFrame() dentro de si, que parece sempre esperar a atualização da renderização em todos os casos.

    O criador da função nomeou esta função forceNextTick(), que pode ser chamada sem uma função de retorno de chamada.

    Se não houver retorno de chamada, ele invocará o doubleRequestAnimationFrame()como um arquivo new Promise.

    Experimente o pacote ou dê uma olhada na implementação sem pacote da solução que ele aplica :

    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>

    Mais Informações

    • 2
  2. Best Answer

    Você pode tentar com a função 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

relate perguntas