使用 Vue 和 Vuex 编辑字段答案

【问题标题】：Editing fields with Vue & Vuex使用 Vue 和 Vuex 编辑字段
【发布时间】：2019-01-13 06:24:18
【问题描述】：

我有一个页面，我希望用户能够在其中编辑他们的房间信息。例如房间的名称。我目前拥有的代码是它在h3 中显示roomName，如果他们单击edit 按钮，则属性edit 更改为true（这将显示text-field 而不是h3)。

<!-- 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>

问题是：如果用户按下取消，我不希望它更新属性roomName。我尝试通过重新运行从商店中获取roomName 的计算属性来做到这一点。但是我不允许我在cancelEdit 中调用计算属性。

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

如何从输入中获取值，或者如何使用这种结构制作取消按钮？

【问题讨论】：

Editing a form with save and cancel options的可能重复

标签： vue.js vuejs2 vuex

【解决方案1】：

检查这个 sn-p 看看它是否可以帮助你，

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

https://jsbin.com/yefiqinewu/edit?html,js,output

【讨论】：

完美的感谢伙伴，在搞砸了这个之后，它最终为我的设置工作了，非常感谢。