对于购物车，组件、项目或项目选项应该是什么，或两者兼而有之？答案

【问题标题】：For shopping carts, what should be the component, the item or the item options or both?对于购物车，组件、项目或项目选项应该是什么，或两者兼而有之？
【发布时间】：2025-12-24 18:45:07
【问题描述】：

我有以下数据需要转成表格。

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，它们是分期付款。他们可以根据自己的选择一次性支付第一份、第二份或整个合同。

所以我需要创建一个表单，它只允许为每个项目添加一个合同选项。这是我所拥有的，但我遇到了保持项目相互独立的问题，并且想知道我是否应该制作项目的组件或项目选项？

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

【问题讨论】：

我对你的问题感到困惑。您是否就是否应该将每个项目创建为组件征求意见？
@m_callens: 是的，一个项目应该是一个组件，还是一个 item_option（单选按钮）应该是一个组件，或者两者兼而有之

标签： javascript vue.js

【解决方案1】：

组件本身并不能使这种数据管理更容易。它们更多地是关于隔离和重用。这是我的建议。

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

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

【讨论】：