Méthode setTimeout, (échange de composants)

Question

J'essaie donc de créer un setTimeoutmethod. Alors quand quelqu'un appuie sur l'un des trois boutons (goutte à goutte, frenchpress, Aeropress). Un setTimeoutmethod de 0,5 secondes déclenchera l'événement. {{échangeant ShowText}} pour {{ShowText2}} Ce qui est 'attendre' + this.order_type

<div id="app"> 
    <barista-template></barista-template> 
</div> 

<!--template for customer--> 
<script type="text/x-template" id="b-template"> 
    <div> 
     <div>{{showText}}</div> 
     <button v-on:click="choose('drip')">Drip</button> 
     <button v-on:click="choose('frenchpress')">French Press</button> 
     <button v-on:click="choose('aeropress')">Aeropress</button> 
     <div>{{showText2}}</div> 
    </div> 
</script> 

<script type="text/x-template" id="c-template"> 
    <div> 
     <div>{{showText2}}</div> 
    </div> 
</script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> 
<script src="JS/app.js"></script> 
</body> 
</html> 

______________JS_______________________________

Vue.component("barista-template",{ 
    template: "#b-template", 
    data: function() { 
     return{ 
      order_type:"", 
      order_value: "", 
     } 
    }, 
    computed: { 
     showText() { 
      if(this.order_type === '') return ''; 
      return 'One ' + this.order_type + ' that would be ' + this.order_value 
     }, 
     methods: { 
      swapComponent: function(component) 
      { 
       setTimeout(() => { 
        this.showText2('brewing') 
       }, 1500); 
       this.currentComponent = component; 
      } 
     } 
     showText2(){ 
      if(this.order_type === '') return ''; 
      return 'waiting for ' + this.order_type 
     } 
    }, 
    methods: { 
     choose: function (order_type) { 
      this.order_type = order_type; 

      if (this.order_type == "drip") { 
       this.order_value = "$10"; 
      } 
      if (this.order_type == "frenchpress") { 
       this.order_value = "$20"; 
      } 
      if (this.order_type == "aeropress") { 
       this.order_value = "$30"; 
      } 
     } 
    }, 
}); 
new Vue ({ 
    el:"#app", 
    data:function() { 
     return{ 
      showing:true 
     } 
    } 
}); 

Answer 1

Est-ce le genre de comportement que vous cherchez? J'ai ajouté une variable swapping pour indiquer quand la permutation est en cours (ce qui signifie que showText2 est affiché).

swapComponent ensembles swapping à true, puis utilise setTimeout pour le remettre à false. choose appels swapComponent.

Vue.component("barista-template", { 
 
    template: "#b-template", 
 
    data: function() { 
 
    return { 
 
     order_type: "", 
 
     order_value: "", 
 
     swapping: false 
 
    } 
 
    }, 
 
    computed: { 
 
    showText() { 
 
     if (this.order_type === '') return ''; 
 
     return 'One ' + this.order_type + ' that would be ' + this.order_value 
 
    }, 
 
    showText2() { 
 
     if (this.order_type === '') return ''; 
 
     return 'waiting for ' + this.order_type 
 
    } 
 
    }, 
 
    methods: { 
 
    swapComponent: function() { 
 
     this.swapping = true; 
 
     setTimeout(() => { 
 
     this.swapping = false; 
 
     }, 1500); 
 
    }, 
 
    choose: function(order_type) { 
 
     this.swapComponent(); 
 
     this.order_type = order_type; 
 

 
     if (this.order_type == "drip") { 
 
     this.order_value = "$10"; 
 
     } 
 
     if (this.order_type == "frenchpress") { 
 
     this.order_value = "$20"; 
 
     } 
 
     if (this.order_type == "aeropress") { 
 
     this.order_value = "$30"; 
 
     } 
 
    } 
 
    } 
 
}); 
 
new Vue({ 
 
    el: "#app", 
 
    data: function() { 
 
    return { 
 
     showing: true 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <barista-template></barista-template> 
 
</div> 
 

 
<!--template for customer--> 
 
<script type="text/x-template" id="b-template"> 
 
    <div> 
 
    <div>{{swapping ? showText2 : showText}}</div> 
 
    <button v-on:click="choose('drip')">Drip</button> 
 
    <button v-on:click="choose('frenchpress')">French Press</button> 
 
    <button v-on:click="choose('aeropress')">Aeropress</button> 
 
    </div> 
 
</script>