使用Vue编辑字段

Question

我有一个页面，我希望用户能够编辑他们的房间信息。例如房间的名称。我目前的代码是，它显示h3中的room Name，如果他们单击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属性的原因

如何从输入中获取值，或者如何使用此结构创建取消按钮？

Answer 1

检查此代码段，看看它是否可以帮助您，

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

https://jsbin.com/yefiqinewu/edit?html，js，输出