我想使用类星体输入从后端更新我的对象。对象获得名为name的字段
下面是代码
<q-table
:rows="state.rooms"
:columns="state.roomsFields"
hide-bottom
:rows-per-page-options="[0]"
row-key='name'
>
<template v-slot:body-cell-name="{ row }">
<q-td key='name' class="text-center items-center">
<q-input v-model="row.name" dense square outlined />
</q-td>
</q-table>但是输入在每个提供或删除的字母后失去了焦点，我认为这是因为字段被称为name和v-slot:body-cell-name是错误的，然后因为当我尝试完全相同的代码与字段被称为number和v-slot:body-cell-number，它工作得很好。
如何解决这个问题？我可以为后端对象的字段创建别名吗？
1条答案
按热度按时间enxuqcxy1#
为什么！
要解决这个问题，你必须知道Vue是如何工作的，以及
key在循环内容中的作用。你可以在这里阅读更多。如果你读过keys，你会知道Vue会跟踪组件，如果任何key发生变化，Vue会“重新渲染”该节点/组件。name字段为什么会出现这种情况？现在我们知道，如果任何组件的键发生变化，Vue将重新渲染它，如果你注意到
q-table组件上的row-key属性，它就是name。你可能会问Vue知道key，那么为什么row-key会搞砸呢？为此，你必须研究Quasar文档，你会知道它接收的 prop 是row-key，但它在引擎盖下使用的是key。因此，所有这些问题都围绕着key旋转。无论如何，它只发生在name字段上，而不是任何其他字段，因为您已经将name指定为row-key，所以每当您尝试更改name字段时，Vue都会将name字段作为key进行跟踪，因此它将重新呈现特定字段。这也差不多回答了你的另一个问题：我认为这是因为字段名为name和v-slot：body-cell-name是错误的，因为当我尝试使用字段名为number和v-slot：body-cell-number的完全相同的代码时，它工作得很好。
keys的一些规则key% s必须唯一！如果数据来自后端，则可以使用uuid或primary keykeys不能更改！渲染时不要生成它们。v-for中使用index修复问题
现在我们知道了问题所在，解决方案应该很简单吗？是的！我们需要更新
row-key到稳定的东西，这是没有改变的。正如你提到的，数据来自后端，我假设它应该有一个id字段，所以我们可以使用id作为row-key作为row-key="id"。但是如果你有任何其他字段是唯一的，并且在更新表中的内容时不会更改，那么你也可以使用它。