Editing fields with Vue & Vuex

Question

I have a page where I want a user to be able to edit their room information. For example the name of the room. The code I have currently is that it shows the roomName in an h3 and if they click on the edit button, then the property edit is changed to true (this will then show the text-field instead of the 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>

The problem is: That if a user presses cancel I don't want it to update the property roomName. I try to do this by rerunning a computed property that grabs the roomName from the store. However I doesn't allow me to call a computed property in cancelEdit.

The reason I'm using a roomName property & v-model, and not directly using the value from the computed property is... because I don't understand how I can grab the value from an input if I press save.

How can I grab the value from an input or how can I make a cancel button with this structure?

Possible duplicate of Editing a form with save and cancel options — Traxo

Armin Ayari Armin Ayari · Accepted Answer · 2018-08-06T10:30:03

Check this snippet to see if it can help you,

I didn't use vuex but you can your initial values from your store:

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

Editing fields with Vue & Vuex

1 Answers