Vue.js 使用Vue&；编辑字段；Vuex

我有一个页面，我希望用户能够编辑他们的房间信息。例如，房间的名称。我目前的代码是，它在

h3

中显示

roomName

，如果他们单击

edit

按钮，则属性

edit

将更改为true（这将显示

文本字段，而不是
h3
）


{{roomName}}
编辑
取消

问题在于：如果用户按“取消”，我不希望它更新属性
roomName
。我试图通过重新运行一个计算属性来实现这一点，该属性从存储中获取
roomName
。但是，我不允许在
cancelEdit
中调用计算属性

我使用
roomName
属性&
v-model
，而不直接使用computed属性中的值的原因是。。。因为我不明白如果我按
save
，如何从输入中获取值

如何从输入中获取值，或者如何使用此结构创建“取消”按钮？
检查此代码段，看看它是否可以帮助您

我没有使用
vuex
，但您可以从您的商店中获取初始值：

完美感谢伴侣的可能复制品，在对它进行了一点修改后，它最终为我的设置工作，非常感谢。
<!-- Room Name -->
<h2 v-if="edit == false">{{ roomName }}</h2>
  <!-- EDIT -->
  <v-text-field
      v-else
      label="Room Name"
      v-model="roomName"
   />

<!--Edit Button-->
<v-btn v-if="edit == false" 
       @click="edit = true" 
       class="filter">Edit</v-btn>

<!--Cancel Button-->
<v-btn v-if="edit == true" 
       @click="cancelEdit" 
       class="filter">Cancel</v-btn>