Question

我是Vue JS的新手。我从服务器端获取了多维数组，应将该数组呈现为html。简单的逻辑是，我得到的饭食数据包括他的头衔，大小和选项。每顿饭都有价格。另外，这顿饭还有其他额外的选择。而且每个额外的选择都有价格。

当用户选择餐食大小时，我可以显示价格。它称为小计价格。但是，如果用户增加或减少进餐量，我将不知道如何进行如下计算：（add_price * total）当用户还选择一个额外的添加时，它也会被计算。它称为额外金额。但是，如果用户再次增加每个选项的数量，则该计算将无法正常进行。

我更喜欢创建一个具有选定价格和数量的新阵列。这使其变得更加复杂。可能这不是一个好方法，尤其是当我要将所有选定的数据（价格，数量，小计，总计）发送到Firebase时

<div id="app">

  <div>
    <h3>{{ item.title }}</h3>
    <input type="number" value="1" :v-model="quantity" class="left">
  </div>
  <div style="clear:both"></div>
  <div v-for="(optGroup, index) in item.opt_groups" class="opt-group" :key="index">
    <h4>{{ optGroup.title }}:</h4>
    <div class="form-row" v-for="(opt, key) in optGroup.opts" :key="key">
      <label v-bind:for="'opt[' + index + ']'">
        <input type="radio" :value="opt.add_price" v-model="price[index]">
        {{ opt.title }}
        <div v-if="index == 1">
          <input type="number"  min="1" value="1">
        </div>
      </label>
    </div>
    <div>
      <span class="amount" v-if="price[index] > 0">$ {{ price[index] }}</span>
    </div>
  </div>

  <p>Subtotal: {{ subTotal }}</p>
  <p>Extra: {{ extra }}</p>
  <p>Total: {{ total }}</p>



</div>

const app = new Vue({
  el: '#app',
  data: {

    quantity: 1,
  price: [],
   item:
   {
     "title": "Green Salad",
     "opt_groups": [
       {
         "title": "Choose Size",
         "opts": [
           {
             "id": 4,
             "title": "Small",
             "add_price": 4.25
           },
           {
             "id": 5,
             "title": "Big",
             "add_price": 6
           }
         ]
       },
       {
         "title": "Extra cheese",
         "opts": [
           {
             "id": 10,
             "title": "Feta cheese (small)",
             "add_price": 3
           },
           {
             "id": 70,
             "title": "Feta cheese (Big)",
             "add_price": 5
           }
         ]
       }
     ]
   }
  },
  computed: {
    subTotal(){
      return this.price[0] || 0
    },
    extra(){
      return this.price[1] || 0
    },
    total(){
      return this.price.reduce((total, value) => total + value, 0)
    }
  }
});

Fiddle Example

Answer 1

第5行，您拥有:v-model="quantity"

这应该只是v-model="quantity"

删除结肠应该有帮助

用新订单的数量计算总价

1 个答案: