v-data-table 中的 v-edit-dialog 在关闭时恢复原始值答案

【问题标题】：v-edit-dialog inside v-data-table restores original value when closedv-data-table 中的 v-edit-dialog 在关闭时恢复原始值
【发布时间】：2021-01-24 04:23:05
【问题描述】：

我有一个使用 Vuetify 的 Vue 应用程序。由于某种原因，v-chip 组件在绑定值更改时不会重新渲染。

<v-data-table>
  <template v-slot:item.active="{ item }">
    <v-edit-dialog :return-value.sync="item.active">
      <v-chip :key="item.active" outlined :color="item.active ? 'success' : 'error'">{{ item.active ? "Open" : "Closed" }}</v-chip>
      <template v-slot:input>
        <v-switch
          @change="saveRowField(item.id, 'active', item.active)"
          v-model="item.active"
          :true-value="1" :false-value="0"
          color="success" label="Open"
          ></v-switch>
      </template>
    </v-edit-dialog>
  </template>
</v-data-table>

v-edit-dialog 中的v-switch 正确更新了绑定字段item.active。然而，模板内的v-chip 组件不会在状态更改时重新呈现。

:key 属性绑定到与v-switch 相同的字段。

为什么当key绑定的值改变时v-chip没有重新渲染？

【问题讨论】：

为什么:key 在v-chip 上？不需要
这是一种强制更新的技术
@DavidGo 好吧....不，不是
michaelnthiessen.com/force-re-render
@DavidGo 好吧，仍然没有。 Vue 是否可以重用现有的组件实例是提示。如果您需要触发生命周期钩子，它会很有用。如果您使用它“强制组件重新渲染”，那么它只是解决组件中其他一些反应性问题的“穷人”解决方法......

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

尝试了您的代码并重新呈现v-chip 的内容不是问题。我看到的是，一旦我点击v-switch，芯片就会改变，但是当v-edit-dialog关闭时，就会恢复原来的值。

所以问题出在v-edit-dialog。如果你把large 属性放在上面，它会显示按钮——“保存”和“取消”。如果您使用“保存”按钮，则保存该值。如果“取消”，则恢复原值。

没有按钮，关闭对话框的唯一方法是单击“离开”，v-edit-dialog 将其解释为“取消”，从而恢复原始值...

可能的解决方案：

让用户使用“保存”/“取消”按钮来确认/取消编辑
或删除:return-value.sync="item.active"（负责此保存/取消行为）。

Demo

【讨论】：