[Vuejs]-Order value isnt showing

by

0👍

The problem, as it has been pointed out, is that your the value cases are not matching. While it is an easy fix, a better(IMHO) way to prevent this from happening is to define an object that you can reference, rather than relying on the string values. This makes it waaaay easier to maintain and change. Check out how easy it is to add one more item.

Vue.component("barista-template",{
  template: "#b-template",
  data: function () {
    return{
      order_type:"",
      order_value: "",
      menu: [
        {
          id: 'drip',
          name: 'Drip Coffee',
          cost: 10
        },
        {
          id: 'frenchpress',
          name: 'French Press',
          cost: 13
        },
        {
          id: 'aeropress',
          name: 'Aeropress',
          cost: 12.75
        },
        {
          id: 'omf',
          name: 'Orange Mocca Frappuccino',
          cost: "BLING BLING"
        }
      ]
    }
  },
  computed: {
    showText () {
      if(this.order_type === '') return 'Please make a choice...';
      return 'one ' + this.order_type + ' that would be ' + this.order_value
    }
  },
  methods: {
      choose: function (menu_item) {
          this.order_type = menu_item.name;
          this.order_value = "$"+menu_item.cost;
      }
  }

});

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-for="m in menu" :key="m.id" v-on:click="choose(m)">{{m.name}}</button>
  </div>
</script>

Leave a comment