加载时选中复选框，存在值时填充输入框

Question

我创建了一个沙盒::

所以我的基本查询是假设我有一个对象数组：

  let sampleArrayOfObject = [{
    Item: "ACC",
    Price: 12,
  },
  {
    Item: "BCC",
    Price: 50,
  },
  {
    Item: "ECC",
    Price: 21,
  }]

我有类型为复选框和文本的输入字段，

在复选框中假设我有 ACC、BCC、CCC、DCC、ECC。

假设当 sampleArrayOfObject 与复选框字段 ACC、BCC、CCC、DCC、ECC 匹配时，应检查 sampleArrayOfObject 中存在的所有匹配值，并且类型的输入字段应将价格作为值。

单击复选框时，文本类型的输入字段应该可见，我们可以在其中输入值。

因此，我们应该能够删除现值或更改价格值，并且所有这些值都应在单击提交时存储在 newItem 变量中（有关该变量的详细信息，请参见 codesandbox）。

我试过了，但我卡住了，如果有人需要任何进一步的信息或需要任何进一步的许可，请告诉我。

Answer 1

如果我正确理解你的问题，你需要三件事：

在您的沙盒中，我向您的对象添加了一个“hasPrice”属性，因为您不能将字符串或数字值用作复选框的 v-model。在您的 onSubmit 中，我只 return 将 hasPrice 布尔值设置为 true 的项目。

Checkbox checked on load and input box filled when a value present