javascript - 对于购物车，组件、商品或商品选项或两者都应该是什么？

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)分期付款。每个合约都有很多contract_options，都是分期付款。他们可以根据自己的选择一次性支付第一份、第二份或整个契约(Contract)的费用。

因此，我需要创建一个仅允许为每个项目添加一个契约(Contract)选项的表单。这是我所拥有的，但我在保持项目彼此独立方面遇到了问题，并且想知道我是否应该制作项目或项目选项的组件？

 <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]
    };
}

即将合约存储在由contract_id索引的对象中。