Javascript 已知值和未知值的Vue绑定输入

我有一个包含已知值和未知值的对象。数量未知，类型已知。我想展示每种类型的用户输入，用户输入数量。如何在Vue中对此进行建模

  data() {
    return {
      message: "",
      order: {
        orderDetails: [], // end result, after user made choices: [{ quantity: 1, productType: "A"}, {quantity: 1 , productType :"B"}] ,
      },
      productType: ["A", "B", "C", "D"],
    };
  },

及

{{item}}

期望的输出有点像这样

<ul>
  <li><input type="number"> A </li>
  <li><input type="number"> B </li>
  <li><input type="number"> C </li>
  <li><input type="number"> D </li>
</ul>

A
B
C
D

---

显然，这不起作用，因为vmodel对象不存在。我不认为使用空数量初始化模型是正确的方法，因为类型将来自API调用，并且不会硬编码。计算属性是解决方案吗？

最好构造数据模型以反映视图。如果您将产品类型和数量分开，那么您将很难在视图中将它们配对，因为数据将到处都是

您希望每个类型都有一个输入列表，因此您的数据模型可以是一个对象数组，其中每个对象都有一个

productType

属性和一个

quantity

属性。最初，每个数量将为0

data（）{
返回{
订单详情：[
{productType:'A'，数量：0}，
{productType:'B'，数量：0}，
{productType:'C'，数量：0}，
{productType:'D'，数量：0}，
]
}
}

但是，假设您不知道这些类型将提前出现（也许您从某个API获取这些类型），因此您不能像我所展示的那样在代码中直接构建数据。因此，一旦有了类型数组，您所要做的就是动态构造

orderDetails

数组：

data（）{
返回{
订单详细信息：[]
}
},
异步创建（）{
//从一些假设的API获取类型
常量类型=等待获取类型（）
//从类型填充orderDetails数组
this.orderDetails=types.map（type=>({
productType:type，
数量：0，
}))
}

现在它只是数据和视图之间的一对一映射

订单详细信息中的（项目、索引）：key=“index”>
{{item.productType}

---

您的视图（模板）应该非常简单，没有复杂的数据处理；它应该只是一个简单的数据函数。

是的，这很有效！这也是我的方法，但我正（如图所示）被一个计算属性所吸引。创造更具意义。谢谢！对于计算属性，您无法真正轻松地执行类似操作，因为从计算属性返回的数据不会是反应性的（这是设计的；只要某些依赖数据发生更改，计算属性就会重新计算）。

<ul>
  <li><input type="number"> A </li>
  <li><input type="number"> B </li>
  <li><input type="number"> C </li>
  <li><input type="number"> D </li>
</ul>