使用Vue和Vuex编辑字段

时间:2018-08-06 10:06:35

标签: vue.js vuejs2 vuex

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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