Javascript Vue js将两个组件中的元素组合在一起

我试图建立一个电子商务类型的应用程序的结帐页。在结帐时，我有一个来自数据库的OrderItems列表，每个都有价格、数量。您可以选择并组合这些。此外，我必须在其他地方呈现一个带有“插件”的列表。这也是OrderItems（相同的属性），但具有不同的类型

我有一个Vue.js组件，用于呈现OrderItems数组，您可以从中选择。我的想法是将同一个组件渲染两次。但是，“选定”属性从一个列表或另一个列表中获取模型，但不能同时从两个列表中获取模型。我希望所选的道具能够保存两个列表中的项目（simple orderItems和Add）

小提琴：

守则：

模板：

<section class="content">
  <div class="row" id="app">
    <div class="col-md-8">
      <div class="box box-primary">
        <div class="box-body">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="control-label required">Items</label>
                <div class="col-md-12">
<entries :entries="{ 0 : { shareSize : 'Small', quantity : '1', itemPrice : '24', frequency : '' }, 1 : { shareSize : 'Medium', quantity : '1', itemPrice : '35', frequency : '' }, 2 : { shareSize : 'Large', quantity : '1', itemPrice : '46', frequency : '' } }"
                  :selected="selected"></entries>
                  </div>
                  <div class="col-md-12">
                  <label class="control-label required">Addons</label>
                  <entries :entries="{ 0 : { shareSize : 'Large', quantity : '1', itemPrice : '46', frequency : '' } }" :selected="selected"></entries>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="box box-info">
          <div class="box-body" style="padding:15px;">
            <div class="container-fluid">
              <div class="form-group">
                <div class="control-label">
                  <label>Summary</label>
                </div>
                <div class="form-control" v-for="item in selected">
                  <span class="pull-left small-box-footer">{{ item.shareSize }}</span>
                  <span class="pull-right">{{ item.quantity + ' x $ ' + (item.itemPrice*item.quantity).toFixed(2)}}</span>
                </div>
                <div class="control-label">
                  <label>Payment plan</label>
                </div>
                <div class="col-md-12">
                  {{ '$ ' + totalAdvance.toFixed(2) }} - advance
                </div>
                <div class="col-md-12">
                  {{ '$ ' + totalFirstWeek.toFixed(2) }} - first week
                </div>
                <div class="col-md-12">
                  {{ '$ ' + onDeliveryPayment.toFixed(2) }}/ week on each of the {{ weeks }} weeks of the subscription
                </div>
                <div class="col-md-12 row">
                  <div class="control-label"><strong><span class="pull-left">Total</span><span class="pull-right">{{ '$ ' + total.toFixed(2) }}</span></strong></div>
                </div>
                <div class="col-md-12 row">
                  <div class="title"><strong><span class="pull-left">Total due now</span><span class="pull-right">{{ '$ ' + totalAdvance.toFixed(2) }}</span></strong></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- component template -->
<template id="entries">
  <div class="col-md-12">
    <div class="form-group" v-for="(entry, key) in entriesCopy" v-bind:entry="entry">
      <div class="form-group col-md-12">
        <div class="col-md-12">
          <div class="col-md-4">
            <input type="checkbox" v-bind:value="entry" v-model="selectedCopy">
          </div>
          <div class="col-md-4">{{entry.shareSize}}</div>
          <div class="col-md-4">{{'$ ' + Number(entry.itemPrice).toFixed(2) }}</div>
        </div>
        <div class="form-group col-md-12">
          <div class="col-md-6">
            <input type="number" v-model="entry.quantity" :value="entry.quantity" />
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

---

不得不进行大量重构，试图严格按照您想要的方式构建购物车。然而，这确实需要重新思考如何构建数据：

这是小提琴：

编辑

为了允许更新产品对象上的多个字段，我认为您目前无法使用v-model进行此操作。因此，与其在组件上设置v型模型，不如向其传递一种方法，您可以通过以下方式更新任何项字段：

小提琴：

var entriesComponent=Vue.component（'entries'{
模板：“#条目”，
道具：{
项目：目标，
itemKey:String，
选定：布尔，
updateSelected:函数，
updateItem：函数，
},
数据（）{
返回{
数量：0，
消息：“”，
}
},
创建（）{
this.quantity=this.item.quantity
this.message=this.item.message
},
观察：{
数量（）{
this.updateItem（this.itemKey，'quantity'，this.quantity）
},
消息（）{
this.updateItem（this.itemKey，'message'，this.message）
},
}
});
新Vue({
el:“#应用程序”，
数据：{
所有产品：{
'foo'：{shareSize:'Small'，quantity:'1'，itemPrice:'24'，消息：'}，
'bar'：{shareSize:'Medium'，quantity:'1'，itemPrice:'35'，消息：'}，
'baz'：{shareSize:'Large'，quantity:'1'，itemPrice:'46'，message:'hello'}，
'bop'：{shareSize:'Large'，quantity:'1'，itemPrice:'46'，消息：'}，
},
物品：['foo'，'bar'，'baz']，
插件：['bop']，
选定：{}，
paymentConfig：{
预付款：25，
第一周：25，
交付：50，
},
周：12，
},
组成部分：{
离心组件，
},
创建（）{
此.setSelectableItems（）
},
计算：{
总预付款（）{
返回（this.paymentConfig.advance*this.total）/100
},
第一周总计（）{
return（this.paymentConfig.firstweek*this.total）/100
},
onDeliveryPayment（）{
return（this.paymentConfig.ondelivery*this.total）/（this.weeks*100）
},
总数（）{
var总和=0
Object.keys（此.selected）
.forEach（（productKey）=>{
如果（此.selected[productKey]）{
总和+=
本周*
此.allProducts[productKey].itemPrice*
此.allProducts[productKey].数量
}
})
回报金额
},
},
方法：{
设置可选项（）{
这是一个项目
.forEach（（productKey）=>{
Vue.set（this.selected，productKey，false）
})
这是addons
.forEach（（productKey）=>{
Vue.set（this.selected，productKey，false）
})
},
setSelected（productKey，值）{
此.selected[productKey]=值
},
syncItem（键、字段、值）{
此.allProducts[key][field]=值
},
},
});
.row{
背景#f1f1；
填充：25px；
边缘顶部：10px；
}
.行：第n个子项（偶数）{
背景#f9f9f9；
}
.项目{
背景：#DCDC；
边框：1px实心#A2A2；
填充：10px；
边缘顶部：10px；
}
.项目跨度{
左边距：10px；
}
.项目输入{
显示：内联块；
}

项目
插件
总结
{{allProducts[productKey].shareSize}
{{allProducts[productKey].quantity}
x$
{（所有产品[productKey].itemPrice*allProducts[productKey].quantity.toFixed（2）}
{{allProducts[productKey].message}
付款计划
{{'$'+totalAdvance.toFixed（2）}-advance

{{'$'+totalFirstWeek.toFixed（2）}-第一周

在订阅的{{weeks}周的每个{{{weeks}}周上{{{'$'+onDeliveryPayment.toFixed（2）}}/周


全部的
{{$'+toFixed（2）}


现在到期的总额
{{$'+totalAdvance.toFixed（2）}

大小：{{item.shareSize}
价格：{{$'+Number（item.itemPrice.toFixed（2）}
此时，我设法向名为addons的组件添加了一个单独的变量。但在我看来，这有点多余。不清楚你在做什么。您的
订单项在哪里？有什么问题
var bus = new Vue();

var entriesComponent = Vue.component('entries', {
  template: '#entries',
  props: {
    entries: [Array, Object],
    selected: Array,
    addons: Array,
    frequencies: [Array, Object],
  },
  created: function() {
    this.entriesCopy = this.entries;
    this.selectedCopy = this.selected;
  },
  watch: {
    selectedCopy: function(val, oldVal) {
      bus.$emit('selected-changed', val);
    }
  },
  data: function() {
    return {
      entriesCopy: [],
      selectedCopy: [] 
    }
  }
});

new Vue({
  el: '#app',
  data: {
    entries: [],
    selected: [],
    addons: [],
    frequencies: [],
    paymentConfig: {
      advance: 25,
      firstweek: 25,
      ondelivery: 50,
    },
    weeks: 12,
  },
  components: {
    'entriesComponent': entriesComponent,
  },
  created: function() {
    // store this to use with Vue.set
    var temp = this;
    bus.$on('selected-changed', function(selected) {
      // vm.$set deprecated
      Vue.set(temp, 'selected', selected);
    });
  },
  computed: {
    totalAdvance: function() {
      return (this.paymentConfig.advance * this.total) / 100;
    },
    totalFirstWeek: {
      get: function() {
        return (this.paymentConfig.firstweek * this.total) / 100;
      },
    },
    onDeliveryPayment: {
      get: function() {
        return (this.paymentConfig.ondelivery * this.total) / (this.weeks * 100);
      }
    },
    total: {
      get: function() {
        var sum = 0;
        var weeks = this.weeks;
        this.selected.forEach(function(item) {
          sum += weeks * item.itemPrice * item.quantity;
        });
        console.log(sum);
        return sum;
      }
    }
  }
});