为什么我的更新对话框看不到表单中的更新值？

Question

我正在 Vue 3 和 Vuetify 3 以及 Pinia 中开发一个演示应用程序，以便我可以学习使用 Vuetify 的主要技术。我的应用程序显示交易列表并提供用于添加新交易的表单。就这么多，工作正常。我添加了按钮来删除交易（也可以正常工作）和更新现有交易，但该按钮无法正常工作。

更新按钮正确显示交易中的当前值，使密钥只读（因为密钥本身不应更改）并使其他值可访问以进行更新。对可更新字段的编辑工作正常。但是，当我在更新之前检查经过验证的输入时，这些值是原始值，而不是更新后的值。我知道我做的事情根本上是错误的，但我不太确定那是什么。

这里有一个游乐场来演示这个问题。

1. 确保您已打开开发者工具，以便可以看到 console.log。
2. 单击表格任意行中带有黑色铅笔图标的黄色按钮，打开“更新”对话框。
3. 在更新对话框中，更改描述、交易类型或金额中的任意一项或多项。
4. 按更新交易按钮。
5. 注意console.log 消息，其中显示更新的Description、更新的TransactionType 和更新的Amount 的值。无论您进行了哪些更新，都只会显示原始值；您在表单上更改的值不会出现。 我以为Description、Transaction Type、Amount这三个字段的值是在

   :model-value

   中找到的。换句话说，表单字段的初始值是表单首次显示时 :model-value 中的值，当其中一个表单字段发生更改时，也可以从

   :model-value

   获取新值，但是这似乎不是真的，因为这就是我试图获取修改后的值的地方。我有什么误解吗？

Answer 1

如果您想要模式中的本地状态（或者，我应该说，如果您只想在确认时应用更改），则必须打破反应性并在模式中创建一个本地

item

变量，该变量保存更改而不将它们应用到

model

。仅当按下确认按钮时，您才能将

item

复制到

model

。

此外，因为

items

是一个数组，所以您需要在父组件内有一个更新函数（在您的情况下为

<App.vue />

），其中：

• 当模态更新值时更新项目并且
• 将 selectedItem 设置为

  null

  ，这会关闭模式。这必须在父组件中完成，而不是在子组件中完成。如果您在子级中执行此操作并应用更改，则表行将变为

  null

  。

在此处查看其工作原理。

注意：我只修复了更新模式的逻辑，您必须为删除模式实现相同的逻辑。