Question

我有一个页面，我希望用户可以在该页面上编辑他们的房间信息。例如房间名称。我目前使用的代码是在roomName中显示h3，如果他们单击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，则为输入。

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

Answer 1

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

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

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

使用Vue和Vuex编辑字段

1 个答案: