3
電子商取引タイプのアプリのチェックアウトページを作成しようとしています。チェックアウトには、価格、数量のデータベースから来るOrderItemのリストがあります。これらを選択して組み合わせることができます。さらに、私はあなたのバスケットに "アドオン"のリストを別の場所にレンダリングする必要があります。これはOrderItems（同じプロパティー）ですが、タイプが異なります。2つのコンポーネントの要素を組み合わせて表示する
私はあなたが選ぶことができるOrderItemの配列をレンダリングするためのVue.jsコンポーネントを持っています。私はこの方法で同じコンポーネントを2回レンダリングしています。しかし、「選択された」プロパティは、モデルを一方のリストまたは他方のリストを形成するが、両方から同時には成立しない。私は両方のリストから項目（シンプルORDERITEMSおよびアドオン）を保持するために選択された小道具をしたいと思い
フィドル：https://jsfiddle.net/w8vfb64L/
コード：
テンプレート：
<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>
Javascriptを：
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;
}
}
}
});
：
フィドル：そこで代わりにコンポーネントのVモデルを設定することにあなたが経由項目のいずれかのフィールドを更新することができる方法を渡しますアドオンと呼ばれるコンポーネントに別の変数を追加します。しかし、これは私の視点から少し冗長です。 – anegrea
あなたがしていることは非常に不明です。あなたの 'OrderItems'はどこですか？どうしたの ？ – Elfayer
質問を編集してさらに情報を追加します。申し訳ありません@Elfayer – anegrea