ショッピングカートの場合、コンポーネント、アイテム、アイテムのオプション、またはその両方は何が必要ですか？

Question

私は以下のデータをフォームに変換する必要があります。

var contract = [ 
    { 
    contract_id: 1, 
    options: [ 
     { contract_option_id: 2, contract_id: 1, payment: 'first', price: 100 }, 
     { contract_option_id: 3, contract_id: 1, payment: 'second', price: 100 }, 
     { contract_option_id: 4, contract_id: 1, payment: 'full', price: 200 } 
    ] 
    }, 
    { 
    contract_id: 2, 
    options: [ 
     { contract_option_id: 5, contract_id: 2, payment: 'first', price: 200 }, 
     { contract_option_id: 6, contract_id: 2, payment: 'second', price: 100 }, 
     { contract_option_id: 7, contract_id: 2, payment: 'full', price: 300 } 
    ] 
    }, 
]; 

私は基本的に、契約割賦を支払うための「ショッピングカート」を作成しています。各契約には、支払いの分割払いであるcontract_optionsが多数あります。彼らは、選択した内容に応じて、第1、第2、またはすべての契約を一度に支払うことができます。

したがって、アイテムごとに1つの契約オプションを追加できるようなフォームを作成する必要があります。ここに私が持っているものがありますが、アイテムを互いに独立させておく問題にぶつかりつつ、アイテムのアイテムまたはアイテムのオプションを作るべきかどうか疑問に思っていましたか？

<table> 
    <tr v-for="contract in availableContracts"> 
    <td> 
     <div v-for="option in contract.options"> 
     <input type="radio" @click="storeInCart(option)" name="item_{{option.contract_id}}" value={{option.price}} > 
     {{ option.payment }} ({{ option.price| currency }}) 
    </div> 
    </td> 

    <td> 
    <button @click="addItem(item)"> 
     add to cart 
    </button> 
    </td> 

    // remove shows up when item added 
    <td><a @click="removeItem(item)">remove</a></td> 
</tr> 

new Vue({ 
el: "#search-results", 

data: { 
    availableItems: items, 
    selectedItem: {}, 
    cart: cartStorage.fetch() 
}, 

watch: { 
    cart: { 
    handler: function(cart) { 
     cartStorage.save(cart); 
    }, 
    deep: true 
    } 
}, 

computed: { 
    subTotal: function() { 
    var total = 0; 
    var cartSize = this.cart.length; 
    for(var i = 0; i < cartSize; i++) { 
     total += this.cart[i].options[0].price; 
    } 
    return (total/100).toFixed(2); 
    } 
}, 

methods: { 
    addItem: function() { 
    this.cart.push(this.selectedItem); 
    }, 

    removeItem: function(item) { 
    this.cart.splice(this.cart.indexOf(item), 1); 
    }, 

    storeInCart: function(option) { 
    this.selectedContract = { 
     contract_id: option.contract_id, 
     options: [option] 
    }; 
    } 
} 
}); 

Answer 1

コンポーネントは、自身でデータ管理のこの種を容易にしないでください。彼らは孤立と再利用の詳細です。ここに私が提案するものがあります。

storeInCart: function(option) { 
    this.selectedContracts[option.contract_id] = { 
     contract_id: option.contract_id, 
     options: [option] 
    }; 
} 

e.e.e. contract_idで索引付けされたオブジェクトにコントラクトを格納します。