Ne pas afficher le texte

Question

Je suis, en créant une petite application barista avec trois boutons, ne pas essayer d'avoir le texte montrer "celui qui serait " jusqu'à ce que quelqu'un clique sur l'un des trois composants. Je sais que je suis proche juste ne peut pas trouver des références à ce Voici mon html:

<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> 

ici est mon 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 
     } 
    } 
}); 

Answer 1

j'utiliser un calculé pour cela, mais vous peut le faire en ligne aussi avec

<div v-if="order_type !== ''"> one {{order_type}} that would be {{order_value}}</div>

juste calculé rend le code plus lisible

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: { 
 
     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:false 
 
     } 
 
    } 
 
});

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

 
<!--template for Barista--> 
 
<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> 
 
</script>