我有一个页面,我希望用户可以在该页面上编辑他们的房间信息。例如房间名称。我目前使用的代码是在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
,则为输入。
如何从输入中获取值或如何使用这种结构创建取消按钮?
答案 0 :(得分:1)