Question

所以当有人按下3 order_values时，我会尝试使用不同的buttons。但我真的不知道我的代码出了什么问题。当我按下三个按钮之一时，order_value不显示。我还是Vue和JavaScript的新手，所以任何人都可以帮忙。

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

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

Answer 1

正如已经指出的那样，问题是你的价值案例不匹配。虽然这是一个简单的修复，但更好的（恕我直言）防止这种情况发生的方法是定义一个可以引用的对象，而不是依赖于字符串值。这使得它更容易维护和更改。看看添加一件物品是多么容易。

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>

订单价值没有显示

1 个答案: