As I work on implementing a setTimeout method, the goal is to trigger an event after a .5 second delay when one of the three buttons (drip, french press, Aeropress) is pressed. This event will replace {{ShowText}} with {{ShowText2}}, which will display 'waiting for ' + 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>
______________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
}
}
});