I am in the process of creating a barista small application that consists of three buttons. My goal is to not display any text until one of the three components is clicked by the user. I believe I am very close to achieving this, but I have been unable to find any references to guide me further. Below is my HTML code:
<div id="app">
<barista-template></barista-template>
</div>
<!--template for Barista-->
<script type="text/x-template" id="b-template">
<div>
<div> one {{order_type}} that would be {{order_value}}</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>
</body>
</html>
And here is my Javascript:
Vue.component("barista-template",{
template: "#b-template",
data: function () {
return{
user_order:"",
computer:"",
outcome:"",
order_type:"",
order_value: "",
}
},
methods: {
choose: function (order_type) {
this.order_type = order_type;
if (this.user_order == "drip") {
if (this.order_value == "drip") this.order_value = $10;
}
if (this.user_order == "frenchpress") {
// if (this.computerMove == "frenchpress") this.outcome ="French press";
}
if (this.user_order == "Aeropress") {
if (this.computerMove == "Aeropress") this.outcome ="Aeropress";
}
}
}
});
new Vue ({
el:"#app",
data:function () {
return{
showing:false
}
}
});